 <include file="public:buyheader"/>
<style type="text/css">
  .yisulayer{
    background: #323a45
  }
  .listyh{
    width: 200px;
    overflow: hidden;
    box-shadow: 0 0 10px #ccc;
    border-radius: 4px;
    position: absolute;
    bottom: 0;
    left: 10px;
  }
  #bd{
    padding-top: 0 !important;
  }
  .youhui{
    border: 1px solid #ccc;
    box-shadow: 0 0 10px #ccc;
    position: absolute;
    bottom: 28px;
    right: 92px;
    background: #fff;
    padding: 10px 5px;
    display: none;
  }
  .youhui p{
    font-size: 13px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
  }
  .youhui p span{
    color: #f60;
  }
  .cunchu{
    margin-bottom: 10px;
  }
  #loginpass,#surepass{
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
  }
</style>
<link href="../css/style.css" rel="stylesheet">
<link href="../css/gobal.css" rel="stylesheet">
<link href="../css/page/frontend/home.css" rel="stylesheet">
<link href="../css/page/frontend/business_cooperation.css" rel="stylesheet">
<link href="../css/page/frontend/service.css" rel="stylesheet">
<link href="../css/page/frontend/help_center.css" rel="stylesheet">
<link href="../css/page/frontend/help_center_detail.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/slidestc.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/onleindex.css">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="../js/operation.js"></script>
<script src="layui/layui.js"></script>
<style type="text/css">
  .containers{
    width: 1200px !important;
    overflow: hidden;
  }
</style>
    <div id="hd">
       
        
    </div>

    <div id="bd" class="main-content" style="margin-top: 60px;">
      <div class="main-wrap clearfix">
         <from class="bd-content-wrap">
          <div class="nextwrap containers">
                <div class="headerleft fl">
                  <a href="#">云服务器 ECS</a>
                  <a href="#">一键购买</a>
                  <a href="#" class="bgcolor">自定义购买</a>
                </div>
                <div class="headerright fr">
                  <a href="#">
                    <i class="buyHistory"></i>
                    购买历史
                  </a>
                  <a href="#">
                    <i class="priceXQ"></i>
                    价格详情
                  </a>
                  <a href="#">
                    <i class="buyYP"></i>
                    购买云盘
                  </a>
                  <a href="#">
                    <i class="goKZT"></i>
                    返回控制台
                  </a>
                </div>
          </div>
            <!-- <div class="headerBtm">
              <div class="innerbox">
                <div class="firstbox lineboxes">
                  <div class="leftes left1">
                    <span class="step stepColor">1</span>
                    <span>基础配置</span>
                    <i>（必填）</i>
                  </div>
                  <div class="lines"></div>
                </div>
                <div class="secbox lineboxes">
                  <div class="leftes left2">
                    <span class="step">2</span>
                    <span>网络和安全组</span>
                    <i>（必填）</i>
                  </div>
                  <div class="lines"></div>
                </div>
                <div class="threebox lineboxes">
                  <div class="leftes left3">
                    <span class="step">3</span>
                    <span>系统配置</span>
                  </div>
                  <div class="lines"></div>
                </div>
                <div class="fourbox lineboxes">
                  <div class="leftes left4">
                    <span class="step">4</span>
                    <span>分组设置</span>
                  </div>
                  <div class="lines"></div>
                </div>
                <div class="fivebox lineboxes">
                  <div class="leftes left5">
                    <span class="step">5</span>
                    <span>确认订单</span>
                    <i>（必填）</i>
                  </div>
                </div>
              </div>
            </div> -->
            <!-- 计费方式 -->
            <div class="nextwrap containers">
              <div class="row">
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"><span>计费方式</span></div>
                <ul class="col-lg-8 col-md-8 col-offset-2 jfsl jffs col-ms-8 col-xs-8" id="jffs">
                  <li class="col-lg-2 col-md-2 col-ms-2 col-xs-2"><span class="colorbg" id="1">包年包月</span></li>
                  <!-- <li class="col-lg-2 col-md-2"><span id="2">按量付费</span></li> -->
                </ul>
              </div>    
            </div>

            <!-- 地域 -->
            <div class="nextwrap containers" style="overflow:visible ">
              <div class="row">
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1">
                  <span>地域</span>
                  <ul class="teachMe"><li><a href="#">教我选择地域</a></li></ul>
              </div>
              <div class="col-lg-2 col-md-2 col-ms-2 col-xs-2 col-offset-2 jfsl2 jfsls areaList">
                <p class="colorbg3 inThis"><span id="cn-qingdao">华北1</span> <i class="fa fa-angle-down"></i></p>
                <div class="arealistNAME">
                      <div class="dyboxes">
                        <dl>
                          <dt>亚太</dt>
                          <volist name="area" id="vo">
                            <if condition="$vo.fen eq 0">
                                 <dd onclick="getareas(this)"><span id="{$vo.keyname}">{$vo.valuename}</span></dd>
                            </if>
                          </volist>
                        </dl>
                      </div>
                      <div class="dyboxes">
                        <dl>
                          <dt>欧洲与美洲</dt>
                          <volist name="area" id="vo">
                            <if condition="$vo.fen eq 1">
                                 <dd onclick="getareas(this)"><span id="{$vo.keyname}">{$vo.valuename}</span></dd>
                            </if>
                          </volist>
                        </dl>
                      </div>
                      <div class="dyboxes">
                        <dl>
                          <dt>中东与印度</dt>
                          <volist name="area" id="vo">
                            <if condition="$vo.fen eq 2">
                                 <dd onclick="getareas(this)"><span id="{$vo.keyname}">{$vo.valuename}</span></dd>
                            </if>
                          </volist>
                        </dl>
                      </div>
                </div>
              </div>
              <div class="choseList col-lg-9 col-md-9 col-ms-9 col-xs-9">
                <span class="colorbg6" onclick="diyuFun(this)">随机分配</span>
                <volist name="info" id="vo">
                      <span onclick="diyuFun(this)" id="{$vo.fenname}">{$vo.fenvaluename}</span>
                </volist>
              </div>
              </div>    
            </div>

             <!-- 实例 -->
            <div class="nextwrap containers">
              <div class="row">
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"><span>实例</span></div>
                <ul class="col-lg-10 col-md-10 col-ms-10 col-xs-10 col-offset-2 jfsl2">
                  <li class="col-lg-2 col-md-2 col-offset-1" id="dropdownMenu1"><span class="colorbg">I/O优化实例</span>
                  </li>
                  <li class="col-lg-3 col-md-3 col-offset-1 col-ms-3 col-xs-3"><i style="width: 10%;float: left;">vCPU：</i>
                    <div class="vcpubox">
                      <i class="fa fa-caret-down" id="favCPU" style="display: block !important;position: absolute;right: 10px;top:10px;"></i>
                      <input type="text" id="inpVcpu" name="vcpu" readonly value="请选择vCPU">
                      <ul class="vcpUl">
                        <li id="1">1vCPU</li>
                        <li id="2">2vCPU</li>
                        <li id="4">4vCPU</li>
                        <li id="8">8vCPU</li>
                        <li id="12">12vCPU</li>
                        <li id="16">16vCPU</li>
                        <li id="24">24vCPU</li>
                        <li id="32">32vCPU</li>
                        <li id="56">56vCPU</li>
                        <li id="64">64vCPU</li>
                      </ul>
                    </div>
                    <!-- <select id="vCPU">
                      <option class="vcpu" id="0">请选择vCPU</option>
                      <option id="1">1vCPU</option>
                      <option id="2">2vCPU</option>
                      <option id="4">4vCPU</option>
                      <option id="8">8vCPU</option>
                      <option id="12">12vCPU</option>
                      <option id="16">16vCPU</option>
                      <option id="24">24vCPU</option>
                      <option id="32">32vCPU</option>
                      <option id="56">56vCPU</option>
                      <option id="64">64vCPU</option>
                    </select> -->
                  </li>
                  <li class="col-lg-3 col-md-3 col-ms-3 col-xs-3 col-offset-1"><i style="display: block !important;position: absolute;right: 10px;top:10px;">内存：</i>
                    <div class="neicunbox">
                      <i class="fa fa-caret-down" id="faneicun" style="display: block !important;position: absolute;right: 10px;top:10px;"></i>
                      <input type="text" id="inpNeicun" name="neicun" readonly value="请选择内存">
                      <ul class="neicunUl"> 
                        <li id="0.5">0.5GiB</li>
                        <li id="1">1GB</li>
                        <li id="2">2GB</li>
                        <li id="4">4GB</li>
                        <li id="8">8GB</li>
                        <li id="16">16GB</li>
                        <li id="24">24GB</li>
                        <li id="32">32GB</li>
                        <li id="48">48GB</li>
                        <li id="64">64GB</li>
                        <li id="96">96GB</li>
                        <li id="128">128GB</li>
                        <li id="160">160GB</li>
                        <li id="224">224GB</li>
                        <li id="256">256GB</li>
                        <li id="480">480GB</li>
                        <li id="512">512GB</li>
                      </ul>
                    </div>
                    <!-- <select id="neicun">
                      <option class="neicun" id="0">请选择内存</option>
                      <option id="0.5">0.5GiB</option>
                      <option id="1">1GiB</option>
                      <option id="2">2GiB</option>
                      <option id="4">4GiB</option>
                      <option id="8">8GiB</option>
                      <option id="16">16GiB</option>
                      <option id="24">24GiB</option>
                      <option id="32">32GiB</option>
                      <option id="48">48GiB</option>
                      <option id="64">64GiB</option>
                      <option id="96">96GiB</option>
                      <option id="128">128GiB</option>
                      <option id="160">160GiB</option>
                      <option id="224">224GiB</option>
                      <option id="256">256GiB</option>
                      <option id="480">480GiB</option>
                      <option id="512">512GiB</option>
                    </select> -->
                  </li>
                  <li class="col-lg-4 col-md-4 col-ms-4 col-xs-4"><i>实例规格：</i>
                    <input type="text" name="" placeholder="如ecs.sn1ne.large" id="instance">
                  </li>
                </ul>
                <div class="col-lg-10 col-md-10 col-ms-10 col-xs-10 col-lg-offset-1 col-md-offset-1 jfsl2">
                  <ul class="childlist">
                    <li><span id="1" class="colorbg2">仅显示最新一代</span></li>
                    <li><span id="2">所有代</span></li>
                  </ul>
                </div>
                <div class="col-lg-10 col-md-10 col-ms-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1 jfsl2 listboxes1">
                  <p class="listp col-lg-1 col-md-1">架构：</p>
                  <ul class="col-lg-11 col-md-11 col-ms-11 col-xs-11 listul jiagou" id="jiagou">
                    <li><span class="colorbg" id="1">x86计算</span></li>
                    <li><span id="2">异构计算 GPU / FPGA</span></li>
                    <li><span id="3">弹性裸金属服务器（神龙）</span></li>
                  </ul>
                </div>
                <div class="col-lg-10 col-md-10 col-ms-10 col-xs-10 col-lg-offset-1 col-md-offset-1 jfsl2 listboxes1" style="margin-top: -17px;">
                  <p class="listp col-lg-1 col-md-1  col-ms-1 col-xs-1">分类：</p>
                  <!-- x86计算 内容-->
                  <ul class="col-lg-11 col-md-11 col-ms-11 col-xs-11 listul fenlei jgfl jGupdate">
                    <li><span class="colorbg">通用型</span></li>
                    <li><span>计算型</span></li>
                    <li><span>内存型</span></li>
                    <li><span>大数据型</span></li>
                    <li><span>本地SSD型</span></li>
                    <li><span>高主频型</span></li>
                    <li><span>入门级（共享）</span></li>
                  </ul>
                  <!-- 异构计算 GPU / FPGA 内容-->
                  <ul class="col-lg-11 col-md-11 col-ms-11 col-xs-11 listul fenlei jgfl jGupdate" style="display: none;">
                    <li><span class="colorbg">GPU计算型</span></li>
                    <li><span>GPU图形加速</span></li>
                    <li><span>FPGA计算型</span></li>
                  </ul>
                  <!-- 弹性裸金属服务器（神龙）内容 -->
                  <ul class="col-lg-11 col-md-11 col-ms-11 col-xs-11 listul fenlei jgfl jGupdate" style="display: none;">
                    <li><span class="colorbg">CPU型</span></li>
                    <li><span>GPU型</span></li>
                  </ul>
                </div>
                <table class="col-lg-10 col-md-10 col-ms-11 col-xs-11 col-lg-offset-1 col-md-offset-1 jfsl2 listable">
                  <tr style="background-color: #eee;padding: 10px 0;">
                    <th>
                      <span style="display: inline-block;">规格族</span>
                      <!-- <span style="display: inline-block;position: relative;top:3px;">
                        <i class="fa fa-caret-up" style="display: block;height: 7px;line-height: 7px;"></i>
                        <i class="fa fa-caret-down" style="display: block;height: 7px;line-height: 7px;"></i>
                      </span> -->
                    </th>
                    <th>
                      <span style="display: inline-block;">系统</span>
                      <!-- <span style="display: inline-block;position: relative;top:3px;">
                        <i class="fa fa-caret-up" style="display: block;height: 7px;line-height: 7px;"></i>
                        <i class="fa fa-caret-down" style="display: block;height: 7px;line-height: 7px;"></i>
                      </span> -->
                    </th>
                    <th>
                      <span style="display: inline-block;">实例规格</span>
                      <!-- <span style="display: inline-block;position: relative;top:3px;">
                        <i class="fa fa-caret-up" style="display: block;height: 7px;line-height: 7px;"></i>
                        <i class="fa fa-caret-down" style="display: block;height: 7px;line-height: 7px;"></i>
                      </span> -->
                    </th>
                    <th>
                      <span style="display: inline-block;">vCPU</span>
                      <!-- <span style="display: inline-block;position: relative;top:3px;">
                        <i class="fa fa-caret-up" style="display: block;height: 7px;line-height: 7px;"></i>
                        <i class="fa fa-caret-down" style="display: block;height: 7px;line-height: 7px;"></i>
                      </span> -->
                    </th>
                    <th>
                      <span style="display: inline-block;">内存(GB)</span>
                      <!-- <span style="display: inline-block;position: relative;top:3px;">
                        <i class="fa fa-caret-up" style="display: block;height: 7px;line-height: 7px;"></i>
                        <i class="fa fa-caret-down" style="display: block;height: 7px;line-height: 7px;"></i>
                      </span> -->
                    </th>
                    <th>
                      <span style="display: inline-block;">规格参考价格</span>
                      <!-- <span style="display: inline-block;position: relative;top:3px;">
                        <i class="fa fa-caret-up" style="display: block;height: 7px;line-height: 7px;"></i>
                        <i class="fa fa-caret-down" style="display: block;height: 7px;line-height: 7px;"></i>
                      </span> -->
                    </th>
                  </tr>
                  <tbody id="rachargbox">
                    
                  </tbody>
                  
                </table>
                <div class="row rowes" style="cursor: pointer;">
                    <div class="col-md-12  col-lg-12 col-ms-12 col-xs-12">
                        <div class="portlet">
                            <div id="htmlDiv"></div>
                            <div class="col-lg-12 col-ms-12 col-xs-12" align="center">
                                <!-- 分页控件，标签必须是<ul> -->
                                <ul id="pageButton"></ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                  <div class="col-lg-10 col-md-10 col-ms-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1 jfsl2 listboxes1">
                    <p class="listp col-lg-12 col-md-12 col-ms-12 col-xs-12">
                      <span class="listspan1 col-lg-2 col-ms-2 col-xs-2 col-md-2">当前选择实例：</span>
                      <span class="listspan2 col-lg-3 col-md-3 col-ms-3 col-xs-3" id="hqslgge">ecs.c5.2xlarge</span>
                      <span class="listspan3 col-lg-7 col-md-7 col-ms-7 col-xs-7" id="chosezh">(8 vCPU 16 GiB,  计算型 c5)</span>
                    </p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-10 col-md-10 col-ms-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1 jfsl2 listboxes1">
                    <div class="listp col-lg-12 col-md-12 col-ms-12 col-xs-12">
                      <span class="listspan1 col-lg-2 col-md-2 col-ms-2 col-xs-2">购买实例数量：</span>
                      <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1 jsNum" style="border: none;">
                        <input type="number" name="" min="1" value="1" class="buyNum1" onblur="exampleS(this)" readonly>
                          <!-- <i class="add" onclick="addNum(this)">∧</i>
                          <i class="reduce" onclick="reduceNum(this)">∨</i> -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="row">
                  <div class="col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1 jfsl2 listboxes1">
                    <div class="listp col-lg-12 col-md-12">
                      <span class="listspan1 col-lg-2 col-md-2">最小购买数量：</span>
                      <div class="col-lg-1 col-md-1 col-lg-offset-1 col-md-offset-1 jsNum">
                        <input type="number" name="" min="1" value="1" class="buyNum1">
                          <i class="add" onclick="addNum(this)">∧</i>
                          <i class="reduce" onclick="reduceNum(this)">∨</i>
                      </div>
                      <p class="col-lg-7 col-md-7 desc">当 ECS的库存数量 < 最小购买数量，会创建失败；当 库存数量 >= 最小购买数量，会尽可能最大化数量创建。</p>
                    </div>
                  </div>
                </div> -->
              </div>    
            </div>
            <!-- 镜像 -->
            <div class="nextwrap containers">
              <div class="row">
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"><span>镜像</span></div>
                <ul class="col-lg-8 col-md-8 col-ms-8 col-xs-8 col-offset-2 jfsl" style="margin-left: -30px;margin-bottom: 10px;">
                  <li class="col-lg-2 col-md-2"><span class="colorbg">系统镜像</span></li>
                </ul>
              </div>  
              <div class="row">
                  <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"></div>
                  <select class="col-lg-2 col-md-2 col-ms-2 col-xs-2 jfsl" id="xtFL">
                    <option class="czxt" id="0">请选择操作系统类别</option>
                  </select>
                  <select class="col-lg-4 col-md-4 col-ms-4 col-xs-4 jfsl" style="margin-left: 10px;" placeholder="请选择版本" id="chosebb">
                    <option class="xtbb">请选择版本</option> 
                  </select>
                   
                </div> 
                <div class="row" style="display: none;">
                  <!-- 暂无数据 -->
                  <select class="col-lg-2 col-md-2 col-ms-2 col-xs-2 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1 jfsl" placeholder="请选择自定义镜像">
                    <option>暂无数据</option>
                  </select>
                  <p class="col-lg-7 col-md-7 col-ms-7 col-xs-7 desc" style="font-size: 13px;">当前配置下无可选镜像，请尝试选择其他地域或者实例规格</p>  
                </div> 
            </div>
            <!-- 储存 -->
            <div class="nextwrap containers">
              <div class="row">

                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"><span>存储</span></div>
                <!-- 系统盘 -->
                <div class="col-lg-11 col-md-11 col-ms-11 col-xs-11 col-offset-2 jfsl" style="margin-left: -30px;">
                  <p class="cunchu" style="margin-bottom: 10px;"><i style="width: 10px;float: left;transform: rotate(90deg);color: rgba(0,0,0,.4);display:none;">&gt;</i><span class="col-lg-2 col-md-2">系统盘</span>
                    <!-- <span class="col-lg-4">高效云盘 40 GiB</span> -->
                  </p>
                  <select class="col-lg-2 col-md-2 col-ms-2 col-xs-2 jfsl" placeholder="请选择操作系统类别" id="systemYun">
                    <option selected>高效云盘</option>
                    <option>SSD云盘</option>
                  </select>
                  <div class="col-lg-2 col-md-2 col-ms-2 col-xs-2 jsNum" style="margin-left: 10px;">
                      <input type="number" name="" min="1" value="40" class="buyNum1" id="changeNums">
                        <!-- <i class="add" onclick="addNum(this)">∧</i>
                        <i class="reduce" onclick="reduceNum(this)">∨</i> -->
                    </div>
                    <p class="desc col-lg-2 col-md-2 col-ms-2 col-xs-2" style="font-size: 15px;color: rgba(0,0,0,.6)">GB 2120 IOPS</p>
                    <!-- <p class="col-lg-12 col-md-12" style="margin-left: -16px;color: rgba(0,0,0,.4);font-size: 13px;">如何选择 SSD云盘 / 高效云盘 / 普通云盘，请看 <a href="#">详细说明&nbsp;&gt;</a></p> -->
                </div>
                <!-- 数据盘 -->
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"><span></span></div>
                <div class="col-lg-11 col-md-11 col-ms-11 col-xs-11 col-lg-offset-2 col-md-offset-2 col-ms-offset-2 col-xs-offset-2 jfsl" style="margin-left: -30px;">
                  <p class="cunchu"><i style="width: 10px;float: left;transform: rotate(90deg);color: rgba(0,0,0,.4);display:none;">&gt;</i><span class="col-lg-2 col-md-2 col-ms-2 col-xs-2">数据盘</span><span class="col-lg-4 col-md-4">0/16</span></p>
                  <p class="col-lg-12 col-md-12 col-ms-12 col-xs-12 choses">你已选择 <span class="colors jssnum addNums">0</span> 块盘，还可以选择 <span class="totalnum colors">16</span> 块盘；</p>
                  <!-- <div class="panboxes col-lg-12">
                    <span class="jian" onclick="reduceboxes(this)">-</span>
                    <select class="col-lg-2 jfsl" placeholder="请选择操作系统类别">
                      <option>CentOS</option>
                      <option>Windows Server</option>
                      <option>Ubuntu</option>
                      <option>Aliyun Linux</option>
                    </select>
                    <div class="col-lg-2 jsNum" style="margin-left: 10px;">
                      <input type="number" name="" min="1" value="1" class="buyNum1">
                        <i class="add" onclick="addNum(this)">∧</i>
                        <i class="reduce" onclick="reduceNum(this)">∨</i>
                    </div>
                    <p class="desc col-lg-2" style="font-size: 15px;color: rgba(0,0,0,.6)">GB 1960 IOPS</p>
                    <p style="float: left;height: 30px;line-height: 30px;">数量：</p>
                    <div class="col-lg-1 jsNum" style="margin-left: 10px;">
                      <input type="number" name="" min="1" value="1" class="buyNum1">
                        <i class="add" onclick="addNum(this)">∧</i>
                        <i class="reduce" onclick="reduceNum(this)">∨</i>
                    </div>
                  </div> -->
                  <div class="panboxes col-lg-12 col-md-12 col-ms-12 col-xs-12">
                    <span class="jia" onclick="jiaboxes(this)">+</span>
                    <span class="jiatxt">增加一块数据盘</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 网络安全分组start -->
            <div class="nextwrap containers">
              <div class="row">
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"><span>网络</span></div>
                <ul class="col-lg-8 col-md-8 col-ms-8 col-xs-8 col-offset-2 jfsl" style="margin-left: -30px;margin-bottom: 10px;">
                  <li class="col-lg-2 col-md-2 col-ms-2 col-xs-2"><span class="colorbg">专有网络</span></li>
                  <!-- <li class="col-lg-1 col-offset-1 answer">?</li> -->
                </ul>
              </div>  
              <div class="row">
                  <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"></div>
                  <select class="col-lg-2 col-md-2 col-ms-2 col-xs-2 jfsl" placeholder="请选择专有网络">
                    <option>默认专有网络</option>
                  </select>
                  <select class="col-lg-2 col-md-2 col-ms-2 col-xs-2 jfsl" style="margin-left: 10px;" placeholder="请选择交换机">
                    <option>默认交换机</option>
                  </select>
                  <div class="tiaozhuang" style="display: block;margin-top: 50px;padding-left: 100px;">
                    如需创建新的专有网络，您可 <a href="{:U('home/service/zyInternet')}" style="color: #00c1de;">前往控制台创建&nbsp;&gt;</a>
                  </div>
                  <div class="row">
                    <div class="col-lg-10 col-md-10 col-ms-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1 jfsl" style="margin-top: 20px;background-color: #eee;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;-ms-border-radius: 6px;padding: 10px;">
                      <p class="col-lg-5 col-md-5 col-ms-5 col-xs-5 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1">
                        所选专有网络：
                        <span>默认专有网络</span>
                      </p>
                      <p class="col-lg-5 col-md-5 col-ms-5 col-xs-5 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1">
                        所选交换机：
                        <span>默认交换机</span>
                      </p>
                      <p class="col-lg-5 col-md-5 col-ms-5 col-xs-5 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1">
                        交换机所在可用区：
                        <span>随机分配</span>
                      </p>
                      <p class="col-lg-5 col-md-5 col-ms-5 col-xs-5 col-lg-offset-1 col-md-offset-1 col-ms-offset-1 col-xs-offset-1">
                        交换机网段：
                        <span>-</span>
                      </p>
                    </div>
                  </div>   
                </div> 
            </div>
            <!-- 网络安全分组end -->
            <!-- 公网带宽start -->
            <div class="nextwrap containers">
              <div class="row">
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"><span>公网带宽</span></div>
                <div class="col-lg-8 col-md-8 col-ms-8 col-xs-8 col-offset-2 jfsl">
                  <p class="col-lg-12 col-md-12 col-ms-12 col-xs-12" style="margin-left: -20px;margin-bottom: 10px;">分配公网IP地址&nbsp;&nbsp;&nbsp;系统会分配公网 IP，也可采用更加灵活的弹性公网 IP 方案，配置并 <a href="javascript:void(0);">绑定弹性公网 IP 地址</a></p>
                </div>
              </div>  
              <div class="row">
                  <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"></div>
                  <ul class="col-lg-8 col-md-8 col-ms-8 col-xs-8 col-offset-2 jfsl" style="margin-left: -30px;" id="daik">
                    <li class="col-lg-2 col-md-2 col-ms-2 col-xs-2"><span class="colorbg" id="1">按固定带宽</span></li>
                    <!-- <li class="col-lg-2 col-md-2"><span id="2">按使用流量</span></li> -->
                    <!-- <li class="answer" style="float: left;">?</li> -->
                    <li class="desc" style="float: left;margin-left: 10px;height: 35px;line-height: 35px;font-size: 13px;">带宽费用合并在ECS实例中收取</li>
                  </ul>  
                </div> 
                <div class="row">
                  <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"></div>
                  <div class="demo col-lg-8 col-md-8 col-ms-8 col-xs-8">
                    <!-- <input type="hidden" class="single-slider" value="25" /> -->
                      <div id="main">
                        <div id="control-group">
                          <div class="scroll-bar" id="scroll-bar">
                            <div class="entire-bar" id="entire-bar"></div>
                            <div class="action-bar" id="action-bar"></div>
                            <div class="action-block" id="action-block">
                            <div class="pointer-label"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                  </div>
                    <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1 jsNum" style="margin-left: 10px;margin-top: 20px;position: relative;">
                      <input type="number" name="" min="1" max="200" value="1" class="buyNum1" id="showArea">
                        <!-- <i class="add" onclick="addNum(this)">∧</i>
                        <i class="reduce" onclick="reduceNum(this)">∨</i> -->
                        <div class="mengc">
                          <p>容量范围：1-200</p>
                          <i></i>
                        </div>
                    </div>
                    <p class="desc col-lg-1 col-md-1 col-ms-1 col-xs-1" style="font-size: 15px;color: rgba(0,0,0,.6);margin-top: 20px;">Mbps</p>
                </div>
            </div>
            <!-- 公网带宽end -->
            <!-- 请选择安全组 start -->
            <div class="nextwrap containers">
              <div class="row">
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"><span>安全组</span></div>
                <div class="col-lg-11 col-md-12 col-ms-12 col-xs-12 col-offset-1 jfsl" style="margin-bottom: 10px;">
                  <p class="col-lg-12 col-md-12 col-ms-12 col-xs-12" style="margin-left: -40px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">请选择安全组</p>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"></div>
                <div class="col-lg-11 col-md-11 col-ms-11 col-xs-11 col-offset-1 jfsl">
                  <select class="col-lg-2 col-md-2 col-ms-2 col-xs-2 jfsl" placeholder="请选择安全组">
                    <option>默认安全组</option>
                  </select>
                  <input class="col-lg-2 col-md-2 col-ms-2 col-xs-2" style="margin-left: 10px;display: none;" type="text" name="" placeholder="请输入安全组的名称">
                  <table class="col-lg-12 col-md-12 col-ms-12 col-xs-12 jfsl2 listable listable1" style="display: none;">
                    <tr style="background-color: #eee;">
                      <th>安全组名称ID</th>
                      <th>安全组名称</th>
                      <th>创建时间</th>
                      <th>实例+辅助网卡</th>
                      <th>专有网络ID</th>
                      <th>规则</th>
                    </tr>
                    <tr>
                      <td>0001</td>
                      <td>安全组0001</td>
                      <td>2018-09-23</td>
                      <td>辅助网卡0001</td>
                      <td>00012jksdfsadfs</td>
                      <td>规则1</td>
                    </tr>
                    <tr>
                      <td>0001</td>
                      <td>安全组0001</td>
                      <td>2018-09-23</td>
                      <td>辅助网卡0001</td>
                      <td>00012jksdfsadfs</td>
                      <td>规则1</td>
                    </tr>
                    <tr>
                      <td>0001</td>
                      <td>安全组0001</td>
                      <td>2018-09-23</td>
                      <td>辅助网卡0001</td>
                      <td>00012jksdfsadfs</td>
                      <td>规则1</td>
                    </tr>
                  </table>
                  <p class="col-lg-12 col-md-12 col-ms-12 col-xs-12" style="padding: 10px;background-color: #eee;display: none;">所选安全组： 默认安全组（自定义端口）</p>
                  <div class="col-lg-12 col-md-12 col-ms-12 col-xs-12" style="display: none;">
                    <p>请勾选要开通的协议/端口：</p>
                    <ul>
                      <li>
                        <label class="checkdiv col-lg-2 col-md-2 col-ms-2 col-xs-2">
                          <i class="fa fa-check-square colorfa"></i>
                          <input type="checkbox" name="" id="0" onclick="checkToggle(this)" checked>
                        </label>
                          <span class="col-lg-2 col-md-2 col-ms-2 col-xs-2">HTTP 80 端口</span>
                      </li>
                      <li>
                        <label class="checkdiv col-lg-2 col-md-2 col-ms-2 col-xs-2">
                          <i class="fa fa-check-square colorfa"></i>
                          <input type="checkbox" name="" id="1" onclick="checkToggle(this)" checked>
                        </label>
                          <span class="col-lg-2 col-md-2 col-ms-2 col-xs-2">HTTPS 443 端口</span>
                      </li>
                      <li>
                        <label class="checkdiv col-lg-2 col-md-2 col-ms-2 col-xs-2">
                          <i class="fa fa-dot-circle-o colorfa"></i>
                          <input type="radio" name="" checked>
                        </label>
                          <span class="col-lg-2 col-md-2 col-ms-2 col-xs-2">HTTPS 443 端口</span>
                      </li>
                      <li>
                        <label class="checkdiv col-lg-2 col-md-2 col-ms-2 col-xs-2">
                          <i class="fa fa-dot-circle-o colorfa"></i>
                          <input type="radio" name="" checked>
                        </label>
                          <span class="col-lg-2 col-md-2 col-ms-2 col-xs-2">HTTPS 443 端口</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: none;">
              <!-- 实例列表 存的值-->
              <!-- <input type="text" name="" value="" id="weeks"> -->
              <input type="text" name="" value="" id="months">
              <input type="text" name="" value="" id="years1">
              <input type="text" name="" value="" id="years2">
              <input type="text" name="" value="" id="years3">
              <input type="text" name="" value="" id="years4">
              <input type="text" name="" value="" id="years5"><br>
              <!-- 系统盘 存的值-->
              <input type="text" name="" value="" id="cGBprice"><br>
              <!-- 数据盘 存的值-->
              <input type="text" name="" value="" id="sGBprice">
              <input type="text" name="" value="" id="sGBnum">
              <!-- 数据盘 存的值-->
              <input type="text" name="" value="0" id="sjTotalprice"><br>
              <br>
              <!-- 各个倍率 -->
              <input type="text" name="" value="0" id="slbei"><br>
              <input type="text" name="" value="0" id="xTbei"><br>
              <input type="text" name="" value="0" id="sJbei"><br>
              <input type="text" name="" value="0" id="dKbei"><br>
              <!-- 公网带宽 存的值-->
              <input type="text" name="" value="0" id="months1price">
              <input type="text" name="" value="0" id="months2price">
              <input type="text" name="" value="0" id="months3price">
              <input type="text" name="" value="0" id="months4price">
              <input type="text" name="" value="0" id="months5price">
              <input type="text" name="" value="0" id="months6price">
              <input type="text" name="" value="0" id="moresixprice"><br>
              <!-- 实例、系统盘、数据盘、带宽 start -->
              <input type="text" name="" value="0" id="prellSl">
              <input type="text" name="" value="0" id="systempriceint">
              <input type="text" name="" value="0" id="datapriceint">
              <input type="text" name="" value="0" id="daikuangint"><br>
              <!-- 实例、系统盘、数据盘、带宽 start -->
              <!-- 打折前后的差价 -->
              <input type="text" name="" value="0" id="zheBefore">
            </div>
            <!-- 请选择安全组 end -->
            <!-- 系统配置start -->
            <div class="nextwrap containers">
              <div class="row">
                <div class="col-lg-1 col-md-1 col-ms-1 col-xs-1"><span>登录凭证</span></div>
                <div class="col-lg-8 col-md-8 col-ms-8 col-xs-8 col-offset-2 jfsl">
                  <ul class="passbox" style="overflow: hidden;">
                      <!-- <li class="col-lg-3 col-md-3">
                        <label class="checkdiv col-lg-2 col-md-2">
                          <i class="fa fa-dot-circle-o colorfa"></i>
                          <input type="radio" name="passradio" checked>
                        </label>
                          <span>密钥对</span>
                      </li> -->
                      <li class="col-lg-3 col-md-3 col-ms-3 col-xs-3">
                        <label class="checkdiv col-lg-2 col-md-2 col-ms-2 col-xs-2">
                          <i class="fa fa-dot-circle-o fa-dot-circle-o4 colorfa"></i>
                          <input type="radio" name="passradio" checked>
                        </label>
                          <span style="margin-left: 10px;">自定义密码</span>
                      </li>
                      <!-- <li class="col-lg-3 col-md-3">
                        <label class="checkdiv col-lg-2 col-md-2">
                          <i class="fa fa-dot-circle-o fa-dot-circle-o5"></i>
                          <input type="radio" name="passradio">
                        </label>
                          <span>创建后设置</span>
                      </li> -->
                    </ul>
                    <!-- <div class="row passli" style="margin-top: 20px;">
                      <div class="col-lg-8 col-md-8 col-offset-2 jfsl">
                        <p class="col-lg-2 col-md-2 desc" style="font-size: 16px;color: #000;">密钥对</p>
                        <select class="col-lg-4 col-md-4 jfsl" placeholder="请选择密钥对">
                          <option>暂无数据</option>
                        </select>
                        <p class="col-lg-12 col-md-12" style="color: rgba(0,0,0,.5);font-size: 13px;">若不填选 密钥对 / 自定义密码，则默认为创建后再设置</p>
                      </div>
                    </div> -->
                    <!-- 自定义密码 -->
                    <div class="row passli" style="margin-top: 20px;">
                      <div class="col-lg-12 col-md-12 col-ms-12 col-xs-12 col-offset-2 jfsl">
                        <p class="col-lg-12 col-md-12 col-ms-12 col-xs-12" style="padding-left: 0;font-size: 16px;margin-bottom: 10px;">登录名：<span id="loginame">root</span></p>
                        <div class="row">
                          <p class="col-lg-2 col-md-2 col-ms-2 col-xs-2 desc" style="font-size: 16px;color: #000;">登录密码：</p>
                          <input class="col-lg-4 col-md-4 col-ms-4 col-xs-4" type="password" name="" placeholder="请输入登录密码" id="loginpass"   onblur="loginpass(this)" />
                          <p class="col-lg-6 col-md-6 col-ms-6 col-xs-6 desc" style="height: 17px;line-height: 17px;">8 - 30 个字符，必须同时包含三项（大写字母、小写字母、数字、 ()`~!@#$%^&*-+=|{}[]:;'<>,.?/ 中的特殊符号）。</p>
                        </div>
                        <div class="row">
                          <p class="col-lg-2 col-md-2 col-ms-2 col-xs-2 desc" style="font-size: 16px;color: #000;">确认密码：</p>
                          <input class="col-lg-4 col-md-2 col-ms-2 col-xs-2" type="password" name="" id="surepass"  onblur="surepass(this)" />
                          <p class="col-lg-6 col-md-6 col-ms-6 col-xs-6 desc">请牢记您所设置的密码，如遗忘可登录ECS控制台重置密码</p>
                        </div>
                        <p class="col-lg-12 col-md-12 col-ms-12 col-xs-12" style="padding-left: 0;">若不填选 密钥对 / 自定义密码，则默认为创建后再设置</p>
                      </div>
                    </div>
                    <!-- 创建后设置 -->
                    <!-- <div class="row passli" style="margin-top: 20px;display: none;">
                      <div class="col-lg-8 col-md-8 col-offset-2 jfsl">
                      </div>
                    </div> -->
                </div>
                <!-- <div class="col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1" style="height: 6px;background-color: #eee;margin-top: 10px;margin-bottom: 10px;"></div> -->
                <!-- <div class="row">
                  <div class="col-lg-8 col-md-8 col-lg-offset-1 col-md-offset-1 jfsl">
                    <p class="col-lg-2 col-md-1 desc" style="font-size: 16px;color: #000;">实例名称：</p>
                    <input class="col-lg-4 col-md-4" type="text" name="" placeholder="可创建后设置" value="launch-advisor-20181009">
                    <p class="col-lg-6 col-md-6 desc">2-128个字符，以大小写字母或中文开头，可包含数字、“.”、“_”、“:”或“-”</p>
                  </div>
                  <div class="col-lg-8 col-md-8 col-lg-offset-1  col-md-offset-1 jfsl">
                    <p class="col-lg-2 col-md-2 desc" style="font-size: 16px;color: #000;">描述：</p>
                    <textarea class="col-lg-4 col-md-4" type="text" name="" col="30" id="descms"></textarea>
                    <p class="col-lg-6 col-md-6 desc">长度为2-256个字符，不能以http://或https://开头</p>
                  </div>
                  <div class="col-lg-8 col-md-8 col-lg-offset-1 col-md-offset-1 jfsl" style="margin-top: 10px;">
                    <p class="col-lg-2 col-md-2 desc" style="font-size: 16px;color: #000;">主机名：</p>
                    <input class="col-lg-4 col-md-4" type="text" name="" placeholder="操作系统内部的计算机名，选填项" id="mainName">
                    <p class="col-lg-12 col-md-12" style="font-size: 13px;">Linux 等其他操作系统： <span style="color: rgba(0,0,0,.4);">长度为 2-64 个字符，允许使用点号(.)分隔字符成多段，每段允许使用大小写字母、数字或连字符(-)，但不能连续使用点号(.)或连字符(-)。不能以点号(.)或连字符(-)开头或结尾。</span></p>
                  </div>
                  <div class="col-lg-8 col-md-8 col-lg-offset-1 col-md-offset-1 jfsl" style="margin-top: 10px;">
                    <p class="col-lg-2 col-md-2" style="font-size: 13px;margin-right: -40px;">有序后缀：</p>
                    <label class="checkdiv col-lg-2 col-md-2">
                      <i class="fa fa-check-square colorfa"></i>
                      <input type="checkbox" name="" id="0" onclick="checkToggle(this)" checked="">
                    </label>
                    <p class="col-lg-6 col-md-6" style="font-size: 13px;">为 实例名称 和 主机名 添加有序后缀</p>
                    <p class="col-lg-12 col-md-12" style="font-size: 13px;color: rgba(0,0,0,.4);">有序后缀从 001 开始递增，最大不能超过 999。例如：LocalHost001，LocalHost002 和 MyInstance001，MyInstance002。</p>
                  </div>
                </div>
                <div class="col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1" style="height: 6px;background-color: #eee;margin-top: 10px;margin-bottom: 10px;"></div> -->
                <!-- 高级选项 -->
                <!-- <div class="row">
                  <div class="col-lg-10 col-md-10 col-lg-offset-1 col-md-offset-1">
                    <p class="cunchu"><i style="width: 10px;float: left;transform: rotate(90deg);">&gt;</i><span class="col-lg-10 col-md-10" style="font-weight: bold;">高级选项（实例 RAM 角色 & 实例自定义数据 cloud-init）</span></p>
                    <div class="col-lg-11 col-md-11 jfsl">
                      <p class="col-lg-2 col-md-2 desc" style="font-size: 15px;color: #000;">实例RAM角色：</p>
                      <select class="col-lg-4 col-md-4 jfsl" placeholder="请选择实例RAM角色">
                        <option>暂无数据</option>
                      </select>
                    </div>
                    <div class="col-lg-11 col-md-11 jfsl">
                      <p class="col-lg-2 col-md-2" style="font-size: 13px;margin-right: -40px;">实例自定义数据：</p>
                      <label class="checkdiv col-lg-2 col-md-2">
                        <i class="fa fa-check-square colorfa"></i>
                        <input type="checkbox" name="" id="0" onclick="checkToggle(this)" checked>
                      </label>
                      <p class="col-lg-6 col-md-6" style="font-size: 13px;">输入已采用 Base64 编码</p>
                    </div>
                    <textarea class="col-lg-12 col-md-12"></textarea>
                    <p class="col-lg-12 col-md-12" style="margin-top:10px;color: rgba(0,0,0,.5)">Windows 支持 bat 和 powershell 两种格式，在 Base64 编码前，第一行为 [bat] 或者 [powershell]。Linux 支持 shell 脚本，更多的格式参考</p>
                  </div>

                </div> -->
              </div>
            </div>
            <!-- 系统配置end -->
            <!-- 底部结算 -->
            <div class="jiesuan">
              <div style="width: 300px;float: left;">
                <div class="timetxt">购买时长：</div>
                <div class="timediv">
                  <i class="fa fa-caret-down" style="display: block !important;position: absolute;right: 10px;top:10px;"></i>
                  <input type="text" name="buytime" class="buytime" id="1" readonly>
                  <ul class="timeUl">
                    <!-- <li class="weeks">一周</li> -->
                    <li class="months" id="1">1个月</li>
                    <li class="months2" id="2">2个月</li>
                    <li class="months3" id="3">3个月</li>
                    <li class="halfyear" id="6">半年</li>
                    <li class="years1" id="12">1年</li>
                    <li class="years2" id="24">2年</li>
                    <li class="years3" id="36">3年</li>
                    <li class="years4" id="48">4年</li>
                    <li class="years5" id="60">5年</li>
                  </ul>
                </div>
                <div class="col-lg-12 col-md-12 col-ms-12 col-xs-12">
                  <p style="width: 200px;margin-top: 10px;color: rgba(0,0,0,.6);font-size: 13px;">
                    公网带宽： <span id="daiass">1</span>Mbps 按固定带宽
                  </p>
                </div>
              </div>
              <div style="width: 462px;float:left;margin-top: 20px;">
                <div style="width: 100%;position: relative;" id="showyH">

                  <!-- 弹窗s -->

                  <div class="youhui">
                    <p><i style="width: 80px;font-style: normal;display: inline-block;">实例优惠：</i><span id="shize"></span>折</p>
                    <p><i style="width: 80px;font-style: normal;display: inline-block;">系统盘优惠：</i><span id="xtze"></span>折</p>
                    <p><i style="width: 80px;font-style: normal;display: inline-block;">数据盘优惠：</i><span id="sjze"></span>折</p>
                    <p><i style="width: 80px;font-style: normal;display: inline-block;">带宽优惠：</i><span id="dkze"></span>折</p>
                  </div>
                  <!-- 弹窗e -->

                <!-- 价格优惠的弹窗 s-->
                <div class="listyh">
                  <ul>
                  </ul>
                </div>  
                <!-- 价格优惠的弹窗 e-->
                  <span>配置费用：</span>
                  <span style="color: #f60;font-size: 24px;">￥ <i class="pfy">0</i></span>
                  <span style="color: #2f7d0d;font-size: 12px;display: inline-block;margin-left: 10px;margin-right: 10px;">省 ￥ <i id="sheng"></i></span>
                  <span style="color: #f60;font-size: 12px;">查看折扣率</span>
                </div>
              </div>
              <div class="surebtn">
                <span onclick="sureorder()">确认订单</span>
              </div>
            </div>
         </from>
      </div>
    </div>

    <script type="text/tpl" id="tiaokuan">
      <div class="xieyi">
          <h5>云服务平台协议</h5>
          <p>在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务</p>

          <p>在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务</p>

          <p>在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细阅读平台服务在您使用云平台之前，请您仔细</p>
      </div>
    
    </script>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/usider.js"></script>
    <script type="text/javascript" src="../js/layer/layer.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    
    <script type="text/javascript" src="../js/jquery.select.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-paginator.js"></script>
    <script src="../js/slide.js"></script>
    <script>
    $('#showyH').hover(function(){
            $('.youhui').show();
          },function(){
            $('.youhui').hide();
      })

      $('.areaList').hover(function(){
        $('.arealistNAME').show();
      },function(){
        $('.arealistNAME').hide();
      })
      new SlideBar({
        actionBlock : 'action-block',
        actionBar : 'action-bar',
        slideBar : 'scroll-bar',
        barLength : 300,
        interval : 50,
        maxNumber : 200,
        showArea : 'showArea'
      });
      
    </script>
    <script type="text/javascript">
      $('.vcpubox').hover(function(){
        $('.vcpUl').show();
        var vcpuval = $('#inpVcpu').val();
        if(vcpuval != ''){
          $('#favCPU').removeClass('fa-caret-down').addClass('fa-times');
        }
      },function(){
        $('.vcpUl').hide();
        $('#favCPU').removeClass('fa-times').addClass('fa-caret-down');
      })
      $('.neicunbox').hover(function(){
        $('.neicunUl').show();
        var neicunval = $('#inpNeicun').val();
        if(neicunval != ''){
          $('#faneicun').removeClass('fa-caret-down').addClass('fa-times');
        }
      },function(){
        $('.neicunUl').hide();
        $('#faneicun').removeClass('fa-times').addClass('fa-caret-down');
      })

      
      // $('.neicunUl>li').click(function(){
      //   jsprice();
      //   var html = $(this).html();
      //   var inpId = $(this).attr('id');
      //   $('#inpNeicun').attr('data-id',inpId);
      //   $('#inpNeicun').val(html);
      //   $(this).parent().hide();
      // })
      // $('.vcpUl>li').click(function(){
      //   jsprice();
      //   var html = $(this).html();
      //   var inpId = $(this).attr('id');
      //   $('#inpVcpu').attr('data-id',inpId);
      //   $('#inpVcpu').val(html);
      //   $(this).parent().hide();
      // })

      // 公网带宽固定带宽的input的计算
      $('#showArea').blur(function(){
        var showAreanum = $(this).val();
        if(showAreanum >= 200){
          $(this).val(200);
        }else if(showAreanum<=1){
          $(this).val(1);
        }else{
          $(this).val(showAreanum);
        }
        jsprice();
        
      })
      // 分月加倍
      function MBpriceFB(arg){
        var buytime = $('.buytime').val();
        switch(buytime){
          case '1个月':
              return accMul(arg,1);
              break;
          case '2个月':
              return accMul(arg,2);
              break;
          case '3个月':
              return accMul(arg,3);
              break;
          case '半年':
              return accMul(arg,6);
              break;
          case '1年':
              return accMul(arg,12);
              break;
          case '2年':
              return accMul(arg,24);
              break;
          case '3年':
              return accMul(arg,36);
              break;
          case '4年':
              return accMul(arg,48);
              break;
          case '5年':
              return accMul(arg,60);
              break;
      }
}
      // 返回的是公网带宽的使用流量的所有价格的计算结果
      function MBprice(){
        var dKbei = $('#dKbei').val();

        var MBnum = $('#showArea').val();
        var months1price = $('#months1price').val();
        var months2price = $('#months2price').val();
        var months3price = $('#months3price').val();
        var months4price = $('#months4price').val();
        var months5price = $('#months5price').val();
        var months6price = $('#months6price').val();
        var moresixprice = $('#moresixprice').val();
        switch(MBnum){
          case '1':
              return accMul(MBpriceFB(months1price),dKbei);
              break;
          case '2':
              return accMul(MBpriceFB(months2price),dKbei);
              break;
          case '3':
              return accMul(MBpriceFB(months3price),dKbei);
              break;
          case '4':
              return accMul(MBpriceFB(months4price),dKbei);
              break;
          case '5':
              return accMul(MBpriceFB(months5price),dKbei);
              break;
          case '6':
              return accMul(MBpriceFB(months6price),dKbei);
              break;
          default:
              //超过6M的单价
              return accMul(MBpriceFB(accAdd(months6price,moresixprice*(MBnum-6))),dKbei);
              break;
          } 
      }
      // 存储中系统盘change事件的计算
      $('#changeNums').change(function(){
        if($(this).val()<=20){
          $(this).val(20);
        }else if($(this).val()>=500){
          $(this).val(500);
        }
        jsprice()
      })
      // 综合价格计算
      function jsprice(){
        // singlemonthspriceb //这个是1GB的单价
        var dKbei = $('#dKbei').val();
        var slbei = $('#slbei').val();  //已用
        var xTbei = $('#xTbei').val();  //已用
        var sJbei = $('#sJbei').val();
        var inputValss = $('#showArea').val();
        $('#daiass').html(inputValss);
        // 数据盘的默认值
        var sjpanTotalprice = accMul(MBpriceFB($('#sjTotalprice').val()),sJbei);  //计算没问题
        // 数据盘打折前的总价格
        $('#datapriceint').val(MBpriceFB($('#sjTotalprice').val()));
        // 系统盘数量
        var GBnum = $('#changeNums').val();
        // 系统盘单价
        var cGBprice = $('#cGBprice').val(); 
        // 系统盘的总价格
        var GBprice = accMul(MBpriceFB(GBnum*cGBprice),xTbei);
        // 系统盘打折前的总价格
        $('#systempriceint').val(MBpriceFB(GBnum*cGBprice));
        var mbprice = MBprice();
        var dKbeis = $('#dKbei').val();
        $('#daikuangint').val(accDiv(mbprice,dKbeis));
        // var weeks =  $('#weeks').val();
        // var weekss = accAdd(accAdd(accAdd(weeks,GBprice),mbprice),sjpanTotalprice);
        // 1个月的计算
        var months = accMul($('#months').val(),slbei);
        // 打折后的总价格
        var monthss = accAdd(accAdd(accAdd(months,GBprice),mbprice),sjpanTotalprice);
        // 打折前的总价格
        var M1 = accAdd(accAdd(accAdd(accDiv(months,slbei),accDiv(GBprice,xTbei)),accDiv(mbprice,dKbei)),accDiv(sjpanTotalprice,sJbei));
        // 1年的计算
        var years1 = accMul($('#years1').val(),slbei);
        // 打折后的总价格
        var yearss1 = accAdd(accAdd(accAdd(years1,GBprice),mbprice),sjpanTotalprice);
        // 打折前的总价格
        var Y1 = accAdd(accAdd(accAdd(accDiv(years1,slbei),accDiv(GBprice,xTbei)),accDiv(mbprice,dKbei)),accDiv(sjpanTotalprice,sJbei));
        // 2年的计算
        var years2 = accMul($('#years2').val(),slbei);
        // 打折后的总价格
        var yearss2 = accAdd(accAdd(accAdd(years2,GBprice),mbprice),sjpanTotalprice);
        // 打折前的总价格
        var Y2 = accAdd(accAdd(accAdd(accDiv(years2,slbei),accDiv(GBprice,xTbei)),accDiv(mbprice,dKbei)),accDiv(sjpanTotalprice,sJbei));
        // 3年的计算
        var years3 = accMul($('#years3').val(),slbei);
        // 打折后的总价格
        var yearss3 = accAdd(accAdd(accAdd(years3,GBprice),mbprice),sjpanTotalprice);
        // 打折前的总价格
        var Y3 = accAdd(accAdd(accAdd(accDiv(years3,slbei),accDiv(GBprice,xTbei)),accDiv(mbprice,dKbei)),accDiv(sjpanTotalprice,sJbei));
        // 4年的计算
        var years4 = accMul($('#years4').val(),slbei);
        // 打折后的总价格
        var yearss4 = accAdd(accAdd(accAdd(years4,GBprice),mbprice),sjpanTotalprice);
        // 打折前的总价格
        var Y4 = accAdd(accAdd(accAdd(accDiv(years4,slbei),accDiv(GBprice,xTbei)),accDiv(mbprice,dKbei)),accDiv(sjpanTotalprice,sJbei));
        // 5年的计算
        var years5 = accMul($('#years5').val(),slbei);
        // 打折后的总价格
        var yearss5 = accAdd(accAdd(accAdd(years5,GBprice),mbprice),sjpanTotalprice);
        // 打折前的总价格
        var Y5 = accAdd(accAdd(accAdd(accDiv(years5,slbei),accDiv(GBprice,xTbei)),accDiv(mbprice,dKbei)),accDiv(sjpanTotalprice,sJbei));
        // 2个月的计算
        var months2 = accMul(months*2,slbei);
        // 打折后的总价格
        var monthss2 = accAdd(accAdd(accAdd(months2,GBprice),mbprice),sjpanTotalprice);
        // 打折前的总价格
        var M2 = accAdd(accAdd(accAdd(accDiv(months2,slbei),accDiv(GBprice,xTbei)),accDiv(mbprice,dKbei)),accDiv(sjpanTotalprice,sJbei));

        // 3个月的计算
        var months3 = accMul(months*3,slbei);
        // 打折后的总价格
        var monthss3 = accAdd(accAdd(accAdd(months3,GBprice),mbprice),sjpanTotalprice);
        // 打折前的总价格
        var M3 = accAdd(accAdd(accAdd(accDiv(months3,slbei),accDiv(GBprice,xTbei)),accDiv(mbprice,dKbei)),accDiv(sjpanTotalprice,sJbei));
        // 半年的计算
        var halfyear = accMul(months*6,slbei);
        // 打折后的总价格
        var halfyears = accAdd(accAdd(accAdd(halfyear,GBprice),mbprice),sjpanTotalprice);
        // 打折前的总价格
        var HALFy = accAdd(accAdd(accAdd(accDiv(halfyear,slbei),accDiv(GBprice,xTbei)),accDiv(mbprice,dKbei)),accDiv(sjpanTotalprice,sJbei));
        var timename = $('.buytime').val();
        switch(timename){
          case '1个月':
              $('.pfy').html(monthss);
              $('#prellSl').val($('#months').val());
              $('#zheBefore').val(Subtr(M1,monthss));
              break;
          case '2个月':
              $('.pfy').html(monthss2);
              $('#prellSl').val(accMul($('#months').val(),2));
              $('#zheBefore').val(Subtr(M2,monthss2));
              break;
          case '3个月':
          $('.pfy').html(monthss3);
              $('#prellSl').val(accMul($('#months').val(),3));  
              $('#zheBefore').val(Subtr(M3,monthss3));
              break;
          case '半年':
          $('.pfy').html(halfyears);
              $('#prellSl').val(accMul($('#months').val(),6));
              $('#zheBefore').val(Subtr(HALFy,halfyears));
              break;
          case '1年':
          $('.pfy').html(yearss1);
              $('#prellSl').val($('#years1').val());
              $('#zheBefore').val(Subtr(Y1,yearss1));
              break;
          case '2年':
          $('.pfy').html(yearss2);
              $('#prellSl').val($('#years2').val());
              $('#zheBefore').val(Subtr(Y2,yearss2));
              break;
          case '3年':
          $('.pfy').html(yearss3);
              $('#prellSl').val($('#years3').val());
              $('#zheBefore').val(Subtr(Y3,yearss3));
              break;
          case '4年':
          $('.pfy').html(yearss4);
              $('#prellSl').val($('#years4').val());
              $('#zheBefore').val(Subtr(Y4,yearss4));
              break;
          case '5年':
          $('.pfy').html(yearss5);
              $('#prellSl').val($('#years5').val());
              $('#zheBefore').val(Subtr(Y5,yearss5));
              break;
          }
          var shengprice = $('#zheBefore').val();
          $('#sheng').html(shengprice);
      }
     
       // 列表点击切换
        function changeTrxz(id){
          $(id).find('td>label>i').addClass('colorfa');
          $(id).siblings('tr').find('td>label>i').removeClass('colorfa');
          $(id).find('td>label>input').attr('checked',true);
          $(id).siblings('tr').find('td>label>input').attr('checked',false);
          var guiGe   = $(id).find('td').eq(0).find('.guige').html();
          var xitong  = $(id).find('td').eq(1).html();
          var vCPU    = $(id).find('td').eq(3).html();
          var neiCun  = $(id).find('td').eq(4).html();
          singlePrice = $(id).find('td').eq(5).find('span').attr('id');
          // $('#weeks').val($(id).find('td').eq(0).find('label>.weeks').html());
          $('#months').val($(id).find('td').eq(0).find('label>.months').html());
          $('#years1').val($(id).find('td').eq(0).find('label>.years1').html());
          $('#years2').val($(id).find('td').eq(0).find('label>.years2').html());
          $('#years3').val($(id).find('td').eq(0).find('label>.years3').html());
          $('#years4').val($(id).find('td').eq(0).find('label>.years4').html());
          $('#years5').val($(id).find('td').eq(0).find('label>.years5').html());
          $('#chosezh').html('('+xitong+'&nbsp;&nbsp;'+'系统'+'&nbsp;&nbsp;'+vCPU+'&nbsp;&nbsp;'+neiCun+')');
          $('#hqslgge').html(guiGe);
          jsprice();
          
                
        }   
      // 页面初始化时系统盘的更新价格的ajax请求公用函数
      // var singlemonthspriceb = 0,monthspriceb = 0;
      function systemAjax(area,system){
        $.ajax({
          url:"{:U('home/service/system')}",
          type: 'post',
          dataType:'json',
          data:{
            area:area,
            system:system
          },
          success:function(res){
            var monthspriceb = res.monthspriceb;
            var singlemonthspriceb = monthspriceb/40;
            $('#cGBprice').val(singlemonthspriceb);
            jsprice();
          }
        })
      }
      // 页面初始化时系统盘的更新价格的请求
      
      (function(){
        var systemname = $('#systemYun').find('option:selected').html();
        var regionId = $('.inThis').find('span').attr('id');
        
        // 初始化系统盘的价格
      })()

      // 系统盘的更新价格的请求
      $('#systemYun').change(function(){
        var systemname = $(this).find('option:selected').html();
        var regionId = $('.inThis').find('span').attr('id');
        systemAjax(regionId,systemname);
      })

      // 页面加载的时候请求
      // $.ajax({
      //     url:"{:U('home/service/data')}",
      //     type: 'post',
      //     dataType:'json',
      //     data:{
      //       area:area,
      //       system:system
      //     },
      //     success:function(res){
            
      //     }
      //   })
    </script>
<script>

  $('.jiagou>li').click(function(){
    var index = $(this).index();
    $('.jgfl').eq(index).show().siblings('.jgfl').hide();
  })
// 计算方式初始化的值


  // 数据的分页列表
var limit = 5;
var page = 1;
// 包年包月的值
var jffsval = $('#jffs>li').find('.colorbg').attr('id');
// 仅显示最新一代和所有代的值
var childval = $('.childlist>li').find('.colorbg2').attr('id');
// 地域初始化的值
var jival = $('.inThis').find('span').attr('id');
var fenname = $('.choseList').find('.colorbg6').attr('id');
// 架构初始化的值
var jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
// 分类初始化的值
var fenleival = $('.fenlei>Li').find('.colorbg').html();
var urls = "{:U('home/service/info')}";
// 包年包月方式
$('.jffs>li').click(function(){
   jffsval = $(this).find('span').attr('id');
    childval = $('.childlist>li').find('.colorbg2').attr('id');
// 地域初始化的值
    fenname = $('.choseList').find('.colorbg6').attr('id');
    jival = $('.inThis').find('span').attr('id');
// 架构初始化的值
    jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
// 分类初始化的值
    fenleival = $('.fenlei>Li').find('.colorbg').html();
   if(jffsval == 2){
    $('.timediv').hide();
   }else{
    $('.timediv').show();
   }
    getpage(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival);
})

// 架构切换更新表格数据
$('#jiagou>li').click(function(){
  jiagouval = $(this).find('span').attr('id');
    // 包年包月的值
  jffsval = $('#jffs>li').find('.colorbg').attr('id');
  // 地域初始化的值
  fenname = $('.choseList').find('.colorbg6').attr('id');
  jival = $('.inThis').find('span').attr('id');
  // 仅显示最新一代和所有代的值
  childval = $('.childlist>li').find('.colorbg2').attr('id');
  var index = $(this).index();
  fenleival = $('.jGupdate').eq(index).find('li').find('.colorbg').html();
  getpage(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival);
})

// 架构的分类切换更新表格数据
$('.jGupdate').each(function(){
  $(this).find('li').click(function(){
    fenleival = $(this).find('span').html();
    var index = $(this).parent('.jGupdate').index();
    jiagouval = $('#jiagou>li').eq(index-1).find('.colorbg').attr('id');
    // 包年包月的值
    jffsval = $('#jffs>li').find('.colorbg').attr('id');
    // 仅显示最新一代和所有代的值
    childval = $('.childlist>li').find('.colorbg2').attr('id');
    // 地域初始化的值
    fenname = $('.choseList').find('.colorbg6').attr('id');
    jival = $('.inThis').find('span').attr('id');
    getpage(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival);
  })  
})
// 仅显示最新一代和所有代的切换更新表格数据
$('.childlist>li').click(function(){
  childval = $(this).find('span').attr('id');
  // 包年包月的值
  jffsval = $('#jffs>li').find('.colorbg').attr('id');
  // 地域初始化的值
  fenname = $('.choseList').find('.colorbg6').attr('id');
  jival = $('.inThis').find('span').attr('id');
  // 架构初始化的值
  jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
  // 分类初始化的值
  fenleival = $('.fenlei>Li').find('.colorbg').html();
  getpage(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival); 
})


//页面启动加载初始化数据
getpage(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival);
// 系统镜像2级联动
$('#xtFL').change(function(){
  var optionid = $(this).find('option:selected').attr('id');
  var optioname = $(this).find('option:selected').val();
  if(optioname.indexOf('Windows')>-1){
    $('#loginame').html('administrator');
  }else{
    $('#loginame').html('root');
  }
  $.ajax({
    url:"{:U('home/service/areaimg')}",
    type:'post',
    dataType:'json',
    data:{
      id:optionid
    },
    success:function(res){
      $('.xtbb').siblings('option').remove();

      var str1 = '';
        console.log(res);
      $.each(res,function(i,item){
        str1+= '<option id="'+item.imageid+'">'+item.osname+'</option>';
      })
        $('.xtbb').after(str1);
    }
  })
})
// 实例vCPU更新表格的数据

$('.vcpUl>li').click(function(){
  // 点击赋值start
  var html = $(this).html();
  var inpId = $(this).attr('id');
  $('#inpVcpu').attr('data-id',inpId);
  $('#inpVcpu').val(html);
  $(this).parent().hide();
  // 点击赋值end
  var optionid = $(this).attr('id');
  var optionids = $('#inpNeicun').attr('data-id');
  childval = $(this).find('span').attr('id');
  // 包年包月的值
  jffsval = $('#jffs>li').find('.colorbg').attr('id');
  // 地域初始化的值
  jival = $('.inThis').find('span').attr('id');
  fenname = $('.choseList').find('.colorbg6').attr('id');
  // 架构初始化的值
  jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
  // 分类初始化的值
  fenleival = $('.fenlei>Li').find('.colorbg').html();
  instancePage(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival,optionid,optionids);
  // setTimeout(function(){
  //   jsprice();
  // },2000)

})
// 实例内存更新表格的数据

$('.neicunUl>li').click(function(){
  // 点击赋值start
  var html = $(this).html();
  var inpId = $(this).attr('id');
  $('#inpNeicun').attr('data-id',inpId);
  $('#inpNeicun').val(html);
  $(this).parent().hide();
  // 点击赋值end
  var optionid = $('#inpVcpu').val();
  var optionids = $(this).attr('data-id');
  childval = $(this).find('span').attr('id');
  // 包年包月的值
  jffsval = $('#jffs>li').find('.colorbg').attr('id');
  // 地域初始化的值
  fenname = $('.choseList').find('.colorbg6').attr('id');
  jival = $('.inThis').find('span').attr('id');
  // 架构初始化的值
  jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
  // 分类初始化的值
  fenleival = $('.fenlei>Li').find('.colorbg').html();
  instancePages(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival,optionid,optionids);
  // setTimeout(function(){
  //   jsprice();
  // },2000)
})
// 实例输入框传值
$('#instance').keyup(function(){
  if($(this).val()){
    var instanceVal = $(this).val();
  }else{
    instanceVal = ''
  }
  childval = $(this).find('span').attr('id');
  // 包年包月的值
  jffsval = $('#jffs>li').find('.colorbg').attr('id');
  // 地域初始化的值
  fenname = $('.choseList').find('.colorbg6').attr('id');
  jival = $('.inThis').find('span').attr('id');
  // 架构初始化的值
  jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
  // 分类初始化的值
  fenleival = $('.fenlei>Li').find('.colorbg').html();
  getInputpage(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival,instanceVal);
})
// 表格的行刷新列表点击获取值
// 初始化时表格的数据
var singlePrice = 0;
$('#favCPU').click(function(){
    if($(this).hasClass('fa-times')){
      $(this).siblings('input').val('');
      window.location.reload()
    }
  })
  $('#faneicun').click(function(){
    if($(this).hasClass('fa-times')){
      $(this).siblings('input').val('');
      window.location.reload()
    }
  })
// 实例中实例规格的分页函数调用
function getInputpage(page,limit,aVal,bVal,cVal,fenVal,dVal,eVal,instanceVal){
  $.post(urls,{childval:aVal,jffsval:bVal,jival:cVal,fenname:fenVal,jiagouval:dVal,fenleival:eVal,page:page,limit:limit,instanceVal:instanceVal},function(msg){
  $('#rachargbox').find('tr').remove();
    // console.log(msg);return false;
    // $("#devices").html(msg.ecscount);
    // alert(msg.ecscount);return
    // console.log(msg);
    var count = Math.ceil(msg.ecscount/limit);
    if(count == 1){
      $('.rowes').hide();
    }
    if(msg.ecscount == 0){
      $('#pageButton').find('li').remove();
    }
    
    var html = '';
    $.each(msg.ecs,function(i,item){
    // $('#rachargbox').find('tr').remove();

          html+='<tr onclick="changeTrxz(this)" id="'+item.id+'">';
          html+='<td>';
          html+='<label class="checkdiv col-lg-2">';
          html+='<i class="fa fa-dot-circle-o"></i>';
          html+='<input type="radio" name="leixing" class="leixing">';
          html+='<span class="weeks btprice">'+item.weeks+'</span>';
          html+='<span class="months btprice">'+item.months+'</span>';
          html+='<span class="years1 btprice">'+item.years1+'</span>';
          html+='<span class="years2 btprice">'+item.years2+'</span>';
          html+='<span class="years3 btprice">'+item.years3+'</span>';
          html+='<span class="years4 btprice">'+item.years4+'</span>';
          html+='<span class="years5 btprice">'+item.years5+'</span>';
          html+='</label><span class="guige">'+item.normsname+'</span></td>';
          html+='<td>'+item.system+'</td>';
          html+='<td>'+item.rule+'</td>';
          html+='<td>'+item.cpu+' vCPU</td>';
          html+='<td>'+item.ram+' GB</td>';
          if(jffsval == 1){
            html+='<td><span id="'+item.months+'">'+item.months+'</span>元/月</td>';
          }else{
            html+='<td><span id="'+item.hours+'">'+item.hours+'</span>元/小时</td>';
          }
          html+='</tr>';

          if(msg.ecs.length>0){
            // $('#weeks').val(msg.ecs[0]['weeks']);
            $('#months').val(msg.ecs[0]['months']);
            $('#years1').val(msg.ecs[0]['years1']);
            $('#years2').val(msg.ecs[0]['years2']);
            $('#years3').val(msg.ecs[0]['years3']);
            $('#years4').val(msg.ecs[0]['years4']);
            $('#years5').val(msg.ecs[0]['years5']);
          }else{
            // $('#weeks').val(0);
            $('#months').val(0);
            $('#years1').val(0);
            $('#years2').val(0);
            $('#years3').val(0);
            $('#years4').val(0);
            $('#years5').val(0);
          }

          var element = $('#pageButton');
          var options = {
            bootstrapMajorVersion : 3,
            currentPage : page, // 当前页数
            numberOfPages : 3, // 显示按钮的数量
            totalPages : count, // 总页数
            numberOfPages:limit, 
            itemTexts : function(type, page, current) {
                switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
                }
            },
            // 点击事件，用于通过Ajax来刷新整个list列表
            onPageClicked : function(event, originalEvent, type, page) {
              start()
               /* getpage(page,'');*/
                getpage(page,limit,childval,jffsval,jival,jiagouval,fenleival);
            }
            };
             element.bootstrapPaginator(options);
    });

      $('#rachargbox').append(html);
      $('#chosezh').html('('+msg.ecs[0].system+'&nbsp;&nbsp;'+'系统'+'&nbsp;&nbsp;'+msg.ecs[0].cpu+'vCPU&nbsp;&nbsp;'+msg.ecs[0].ram+'GB)');
      $('#hqslgge').html(msg.ecs[0].normsname);
      // 设置第一个tr选中的值样式
      start()
    },'json');
      setTimeout(function(){
        jsprice();
      },2000)
}
// 数据列表的中拼接绑定事件的请求
function updateData(id){
  var optionids = $(id).attr('id');
  var html = $(id).html();
  var optionid = $('#inpVcpu').val();
  $('#inpNeicun').val(html);
  $(id).parent().hide();
  childval = $(this).find('span').attr('id');
  // 包年包月的值
  jffsval = $('#jffs>li').find('.colorbg').attr('id');
  // 地域初始化的值
  fenname = $('.choseList').find('.colorbg6').attr('id');
  jival = $('.inThis').find('span').attr('id');
  // 架构初始化的值
  jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
  // 分类初始化的值
  fenleival = $('.fenlei>Li').find('.colorbg').html();
  instancePages(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival,optionid,optionids);
}
// 数据列表的中拼接绑定事件的请求
function updateDatas(id){
  var optionid = $(id).attr('id');
  var html = $(id).html();
  var optionids = $('#inpNeicun').val();
  $('#inpVcpu').val(html);
  $(id).parent().hide();
  childval = $(this).find('span').attr('id');
  // 包年包月的值
  jffsval = $('#jffs>li').find('.colorbg').attr('id');
  // 地域初始化的值
  fenname = $('.choseList').find('.colorbg6').attr('id');
  jival = $('.inThis').find('span').attr('id');
  // 架构初始化的值
  jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
  // 分类初始化的值
  fenleival = $('.fenlei>Li').find('.colorbg').html();
  instancePages(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival,optionid,optionids);
}
function instancePages(page,limit,aVal,bVal,cVal,fenVal,dVal,eVal,optionid,optionids){
  $.post(urls,{childval:aVal,jffsval:bVal,jival:cVal,fenname:fenVal,jiagouval:dVal,fenleival:eVal,page:page,limit:limit,optionid:optionid,optionids:optionids},function(msg){
  $('#rachargbox').find('tr').remove();
    // console.log(msg);return false;
    // $("#devices").html(msg.ecscount);
    // alert(msg.ecscount);return
    console.log(msg);
    var count = Math.ceil(msg.ecscount/limit);
    if(count == 1){
            $('.rowes').hide();
    }
    var str = '';
    if(msg.ecscount == 0){
      $('#pageButton').find('li').remove();
    }
      // 实例中内存的select框数据更新
      $.each(msg.ram,function(i,item){
        $('.vcpUl').find('li').remove();
        str+= '<li id="'+item['cpu']+'" onclick="updateDatas(this)">'+item['cpu']+'vCPU</li>';
        $('.vcpUl').append(str);
      })

    var html = '';
    $.each(msg.ecs,function(i,item){
    // $('#rachargbox').find('tr').remove();

          html+='<tr onclick="changeTrxz(this)" id="'+item.id+'">';
          html+='<td>';
          html+='<label class="checkdiv col-lg-2">';
          html+='<i class="fa fa-dot-circle-o"></i>';
          html+='<input type="radio" name="leixing" class="leixing">';
          html+='<span class="weeks btprice">'+item.weeks+'</span>';
          html+='<span class="months btprice">'+item.months+'</span>';
          html+='<span class="years1 btprice">'+item.years1+'</span>';
          html+='<span class="years2 btprice">'+item.years2+'</span>';
          html+='<span class="years3 btprice">'+item.years3+'</span>';
          html+='<span class="years4 btprice">'+item.years4+'</span>';
          html+='<span class="years5 btprice">'+item.years5+'</span>';
          html+='</label><span class="guige">'+item.normsname+'</span></td>';
          html+='<td>'+item.system+'</td>';
          html+='<td>'+item.rule+'</td>';
          html+='<td>'+item.cpu+' vCPU</td>';
          html+='<td>'+item.ram+' GB</td>';
          if(jffsval == 1){
            html+='<td><span id="'+item.months+'">'+item.months+'</span>元/月</td>';
          }else{
            html+='<td><span id="'+item.hours+'">'+item.hours+'</span>元/小时</td>';
          }
          html+='</tr>';

          if(msg.ecs.length>0){
            // $('#weeks').val(msg.ecs[0]['weeks']);
            $('#months').val(msg.ecs[0]['months']);
            $('#years1').val(msg.ecs[0]['years1']);
            $('#years2').val(msg.ecs[0]['years2']);
            $('#years3').val(msg.ecs[0]['years3']);
            $('#years4').val(msg.ecs[0]['years4']);
            $('#years5').val(msg.ecs[0]['years5']);
          }else{
            // $('#weeks').val(0);
            $('#months').val(0);
            $('#years1').val(0);
            $('#years2').val(0);
            $('#years3').val(0);
            $('#years4').val(0);
            $('#years5').val(0);
          }

          var element = $('#pageButton');
          var options = {
            bootstrapMajorVersion : 3,
            currentPage : page, // 当前页数
            numberOfPages : 3, // 显示按钮的数量
            totalPages : count, // 总页数
            numberOfPages:limit, 
            itemTexts : function(type, page, current) {
                switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
                }
            },
            // 点击事件，用于通过Ajax来刷新整个list列表
            onPageClicked : function(event, originalEvent, type, page) {
              start()
               /* getpage(page,'');*/
                instancePages(page,limit,childval,jffsval,jival,jiagouval,fenleival,optionid,optionids);
            }
            };
             element.bootstrapPaginator(options);
    });

      $('#rachargbox').append(html);
      // 设置第一个tr选中的值样式
      start()
    },'json');
  setTimeout(function(){
    jsprice();
  },2000)
}
function instancePage(page,limit,aVal,bVal,cVal,fenVal,dVal,eVal,optionid,optionids){
  $.post(urls,{childval:aVal,jffsval:bVal,jival:cVal,fenname:fenVal,jiagouval:dVal,fenleival:eVal,page:page,limit:limit,optionid:optionid,optionids:optionids},function(msg){
  $('#rachargbox').find('tr').remove();
    // console.log(msg);return false;
    // $("#devices").html(msg.ecscount);
    // alert(msg.ecscount);return
    console.log(msg);
    var count = Math.ceil(msg.ecscount/limit);
    if(count == 1){
            $('.rowes').hide();
    }
    var str = '';
    
      if(msg.ecscount == 0){
        $('#pageButton').find('li').remove();
      }
    // 实例中vCPU的ul框数据更新
      $.each(msg.cpu,function(i,item){
        $('.neicunUl').find('li').remove();
        str+= '<li id="'+item['ram']+'" onclick="updateData(this)">'+item['ram']+'GB</li>';
        $('.neicunUl').append(str);
      })
      
      // 实例中内存的select框数据更新
      // updatetable(msg);
      var html = '';
    $.each(msg.ecs,function(i,item){

          html+='<tr onclick="changeTrxz(this)" id="'+item.id+'">';
          html+='<td>';
          html+='<label class="checkdiv col-lg-2">';
          html+='<i class="fa fa-dot-circle-o"></i>';
          html+='<input type="radio" name="leixing" class="leixing">';
          html+='<span class="weeks btprice">'+item.weeks+'</span>';
          html+='<span class="months btprice">'+item.months+'</span>';
          html+='<span class="years1 btprice">'+item.years1+'</span>';
          html+='<span class="years2 btprice">'+item.years2+'</span>';
          html+='<span class="years3 btprice">'+item.years3+'</span>';
          html+='<span class="years4 btprice">'+item.years4+'</span>';
          html+='<span class="years5 btprice">'+item.years5+'</span>';
          html+='</label><span class="guige">'+item.normsname+'</span></td>';
          html+='<td>'+item.system+'</td>';
          html+='<td>'+item.rule+'</td>';
          html+='<td>'+item.cpu+' vCPU</td>';
          html+='<td>'+item.ram+' GB</td>';
          if(jffsval == 1){
            html+='<td><span id="'+item.months+'">'+item.months+'</span>元/月</td>';
          }else{
            html+='<td><span id="'+item.hours+'">'+item.hours+'</span>元/小时</td>';
          }
          html+='</tr>';

          if(msg.ecs.length>0){
            // $('#weeks').val(msg.ecs[0]['weeks']);
            $('#months').val(msg.ecs[0]['months']);
            $('#years1').val(msg.ecs[0]['years1']);
            $('#years2').val(msg.ecs[0]['years2']);
            $('#years3').val(msg.ecs[0]['years3']);
            $('#years4').val(msg.ecs[0]['years4']);
            $('#years5').val(msg.ecs[0]['years5']);
          }else{
            // $('#weeks').val(0);
            $('#months').val(0);
            $('#years1').val(0);
            $('#years2').val(0);
            $('#years3').val(0);
            $('#years4').val(0);
            $('#years5').val(0);
          }
          var element = $('#pageButton');
          var options = {
            bootstrapMajorVersion : 3,
            currentPage : page, // 当前页数
            numberOfPages : 3, // 显示按钮的数量
            totalPages : count, // 总页数
            numberOfPages:limit, 
            itemTexts : function(type, page, current) {
                switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
                }
            },
            // 点击事件，用于通过Ajax来刷新整个list列表
            onPageClicked : function(event, originalEvent, type, page) {
              start()
               /* getpage(page,'');*/
                instancePage(page,limit,childval,jffsval,jival,jiagouval,fenleival,optionid,optionids);
            }
            };
             element.bootstrapPaginator(options);
    });

      $('#rachargbox').append(html);
      // 设置第一个tr选中的值样式
      start();
    
    },'json');
      setTimeout(function(){
        jsprice();
      },2000)
}


// 分页切换时的操作
function start(){
  (function(){
    $('#rachargbox>tr').each(function(i,item){
      $('#rachargbox>tr').eq(i).find('td').eq(0).find('i').removeClass('colorfa');
    });
    $('#rachargbox>tr').eq(0).find('td').eq(0).find('i').addClass('colorfa');
    $('#rachargbox>tr').eq(0).find('td').eq(0).find('input').prop('checked',true);
  })();
}

var chsprice = 0,months1price = 0,months2price = 0,months3price = 0,months4price = 0,months5price = 0,months6price = 0,moresixprice = 0,mbprice = 0,sJmonthspriceb = 0,sdJmonthspriceb = 0;
function getpage(page,limit,aVal,bVal,cVal,fenVal,dVal,eVal){

  $.post(urls,{childval:aVal,jffsval:bVal,jival:cVal,fenname:fenVal,jiagouval:dVal,fenleival:eVal,page:page,limit:limit},function(msg){
    // console.log(msg);return false;
    // $("#devices").html(msg.ecscount);
    // alert(msg.ecscount);return
    console.log(msg);
    if(msg.ecscount == 0){
      $('#pageButton').find('li').remove();
      $('.pfy').html(0);
    }

    $('#rachargbox').find('tr').remove();
    // 公网固定带宽(1-6M)的价格及超过6M的单价
    // 1M的价格
    var a = msg.bei['instance'];
    a = accMul(a,10);
    var b =  msg.bei['system_disk'];
    b = accMul(b,10);
    var c = msg.bei['storage_disc'];
    c = accMul(c,10);
    var d = msg.bei['network'];
    d = accMul(d,10);
    $('#shize').html(a);
    $('#xtze').html(b);
    $('#sjze').html(c);
    $('#dkze').html(d);


    $('#slbei').val(msg.bei['instance']);
    $('#xTbei').val(msg.bei['system_disk']);
    $('#sJbei').val(msg.bei['storage_disc']);
    $('#dKbei').val(msg.bei['network']);  
    months1price = msg.bandwidth.months1price;
    $('#months1price').val(months1price);
    // 2M的价格
    months2price = msg.bandwidth.months2price;
    $('#months2price').val(months2price);
    // 3M的价格
    months3price = msg.bandwidth.months3price;
    $('#months3price').val(months3price);
    // 4M的价格
    months4price = msg.bandwidth.months4price;
    $('#months4price').val(months4price);
    // 5M的价格
    months5price = msg.bandwidth.months5price;
    $('#months5price').val(months5price);
    // 6M的价格
    months6price = msg.bandwidth.months6price;
    $('#months6price').val(months6price);
    // 6M以上的1M的单价
    moresixprice = Subtr(msg.bandwidth.months6price,msg.bandwidth.months5price);
    $('#moresixprice').val(moresixprice);
    mbprice = MBprice();
  // 调用系统盘的价格
      var systemname = $('#systemYun').find('option:selected').html();
      var regionId = $('.inThis').find('span').attr('id');
      systemAjax(regionId,systemname);
    var count = Math.ceil(msg.ecscount/limit);
    if(count == 1){
        $('.rowes').hide();
    }
    var str = '';
    $.each(msg.areaimg,function(i,item){
      $('.czxt').siblings('option').remove();
      str+= '<option id="'+item['id']+'">'+item['platform']+'</option>';
      $('.czxt').after(str);
      //系统镜像
      
    })
    
    var html = '';
    $.each(msg.ecs,function(i,item){

          html+='<tr onclick="changeTrxz(this)" id="'+item.id+'">';
          html+='<td>';
          html+='<label class="checkdiv col-lg-2">';
          html+='<i class="fa fa-dot-circle-o"></i>';
          html+='<input type="radio" name="leixing" class="leixing">';
          html+='<span class="weeks btprice">'+item.weeks+'</span>';
          html+='<span class="months btprice">'+item.months+'</span>';
          html+='<span class="years1 btprice">'+item.years1+'</span>';
          html+='<span class="years2 btprice">'+item.years2+'</span>';
          html+='<span class="years3 btprice">'+item.years3+'</span>';
          html+='<span class="years4 btprice">'+item.years4+'</span>';
          html+='<span class="years5 btprice">'+item.years5+'</span>';
          html+='</label><span class="guige">'+item.normsname+'</span></td>';
          html+='<td>'+item.system+'</td>';
          html+='<td>'+item.rule+'</td>';
          html+='<td>'+item.cpu+' vCPU</td>';
          html+='<td>'+item.ram+' GB</td>';
          if(jffsval == 1){
            html+='<td><span id="'+item.months+'">'+item.months+'</span>元/月</td>';
          }else{
            html+='<td><span id="'+item.hours+'">'+item.hours+'</span>元/小时</td>';
          }
          html+='</tr>';
          if(msg.ecs.length>0){
            // $('#weeks').val(msg.ecs[0]['weeks']);
            $('#months').val(msg.ecs[0]['months']);
            $('#years1').val(msg.ecs[0]['years1']);
            $('#years2').val(msg.ecs[0]['years2']);
            $('#years3').val(msg.ecs[0]['years3']);
            $('#years4').val(msg.ecs[0]['years4']);
            $('#years5').val(msg.ecs[0]['years5']);
          }else{
            // $('#weeks').val(0);
            $('#months').val(0);
            $('#years1').val(0);
            $('#years2').val(0);
            $('#years3').val(0);
            $('#years4').val(0);
            $('#years5').val(0);
          }
          // 数据盘的价格设置
          sJmonthspriceb = msg['gao']['monthspriceb'];
          sdJmonthspriceb = msg['ssd']['monthspriceb'];
          //alert(sJmonthspriceb);  //0.35 数据盘高效云盘
          $('#sGBprice').val(sJmonthspriceb);
      $('#chosezh').html('('+msg.ecs[0].system+'&nbsp;&nbsp;'+'系统'+'&nbsp;&nbsp;'+msg.ecs[0].cpu+'vCPU&nbsp;&nbsp;'+msg.ecs[0].ram+'GB)');
      $('#hqslgge').html(msg.ecs[0].normsname);
      // $('.pfy').html(msg.ecs[0].months);

      chsprice = msg.ecs[0].months;

          var element = $('#pageButton');
          var options = {
            bootstrapMajorVersion : 3,
            currentPage : page, // 当前页数
            numberOfPages : 3, // 显示按钮的数量
            totalPages : count, // 总页数
            numberOfPages:limit, 
            itemTexts : function(type, page, current) {
                switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
                }
            },
            // 点击事件，用于通过Ajax来刷新整个list列表
            onPageClicked : function(event, originalEvent, type, page) {
              // 点击分页按钮切换时设置第一条数据为默认的选中
              start()

               /* getpage(page,'');*/
                getpage(page,limit,childval,jffsval,jival,fenname,jiagouval,fenleival);
            }
            };
             element.bootstrapPaginator(options);
    });

            $('#rachargbox').append(html);
            // 设置第一个tr选中的值样式
            start();
    },'json');
 setTimeout(function(){
    jsprice();
  },2000)
}

</script>
   
    <script type="text/javascript">

      (function(){
        var timehtml = $('.timeUl>li').eq(0).html();
        $('.buytime').val(timehtml);
      })();
      // 存时间价格
      // var weeks = 0,months = 0,years1 = 0,years2 = 0,years3 = 0,years4 = 0,years5 = 0,months2 = 0,months3 = 0,halfyear = 0;
      
      $('.timeUl>li').click(function(){
        
        var inputxt = $(this).html();
        var id = $(this).attr('id');
        $('.buytime').attr('id',id);
        $('.buytime').val(inputxt);
        $(this).parent().hide();
        jsprice();
      })

      $('.timediv').hover(function(){
        $('.timeUl').slideDown(200);
      },function(){
        $('.timeUl').slideUp(200);
      })

      $('.passbox>li').click(function(){
        var index = $(this).index();
        $(this).find('.checkdiv>i').addClass('colorfa').parent().parent().siblings().find('.checkdiv>i').removeClass('colorfa');
        $('.passli').eq(index).show().siblings('.passli').hide();
      })
      
      function checkToggle(id){
        if($(id).prop('checked')){
          var color = "#ccc",appendStr;
          appendStr = "<style>.colorfa:before{color:" + color + "}</style>";
          $(id).siblings('i').addClass('colorfa');
        }else{
          $(id).siblings('i').removeClass('colorfa');
        }
      }

      // 地域块的js效果
      

      // 数据盘加减的计算
      function computed(id){
        var sjpanComputed = $(id).find('option:selected').val();
        if(sjpanComputed == '高效云盘'){
          $(id).siblings('div').find('.shujuNums').attr('id',sJmonthspriceb);
        }else{
          $(id).siblings('div').find('.shujuNums').attr('id',sdJmonthspriceb);
        }
        var nums = $(id).siblings('div').find('.shujuNums').attr('id');
        var thisVal = $(id).siblings('div').find('.shujuNums').val();
        var shuliang = $(id).siblings('div').find('.addShu').val();
        var ztotals = accMul(accMul(thisVal,shuliang),nums);
        $(id).siblings('div').find('.ztotals').val(ztotals);
        totalcomputed()
        jsprice()
      }
      
      // GB的计算
      function valChange(id){
        var thisVal = $(id).val();
        var shuliang =  $(id).parent().siblings('div').find('.addShu').val();
        var sjpanComputed = $(id).parent().siblings('.sjpan').find('option:selected').val();
        if(sjpanComputed == '高效云盘'){
          $(id).attr('id',sJmonthspriceb);
        }else{
          $(id).attr('id',sdJmonthspriceb);
        }
        var nums = $(id).attr('id');
        var ztotals = accMul(accMul(thisVal,shuliang),nums);
        $(id).parent().siblings('div').find('.ztotals').val(ztotals);
        totalcomputed()
        jsprice()
      }
      // 数量
      function shuliangChange(id){
        var shuliang = $(id).val();
        var thisVal = $(id).parent().siblings('div').find('.shujuNums').val();
        var sjpanComputed = $(id).parent().siblings('.sjpan').find('option:selected').val();
        if(sjpanComputed == '高效云盘'){
          $(id).parent().siblings('div').find('.shujuNums').attr('id',sJmonthspriceb);
        }else{
          $(id).parent().siblings('div').find('.shujuNums').attr('id',sdJmonthspriceb);
        }
        var nums = $(id).parent().siblings('div').find('.shujuNums').attr('id');
        var ztotals = accMul(accMul(thisVal,shuliang),nums);
        $(id).siblings('.ztotals').val(ztotals);
        totalcomputed()
        jsprice()
      }
      function totalcomputed(){
      var ztotal = 0;
        $('.ztotals').each(function(i){
          if($('.addNums').html() == 0){
              $('#sjTotalprice').val(0)            
          }else{
            ztotal = accAdd(ztotal,$(this).val());
            $('#sjTotalprice').val(ztotal);
          }

          console.log($('#sjTotalprice').val());
        });
      }

      // 数据盘的初始化计算
      // (function(){
      //   $('.')
      // })()

      function jiaboxes(id){
        var html = '';
        html+='<div class="panboxes col-lg-12 jianpans">';
        html+='<span class="jian" onclick="reduceboxes(this)">-</span>';
        html+='<select class="col-lg-2 jfsl sjpan" onchange="computed(this)">';
        html+='<option selected>高效云盘</option>';
        html+='<option>SSD云盘</option>';
        html+='</select>';
        html+='<div class="col-lg-2 jsNum" style="margin-left: 10px;">';
        html+='<input type="number" name="" min="1" value="20" class="buyNum1 shujuNums" onblur="valChange(this)">';
        // html+='<i class="add" onclick="addNum(this)">∧</i>';
        // html+='<i class="reduce" onclick="reduceNum(this)">∨</i>';
        html+='</div>';
        html+='<p class="desc col-lg-2" style="font-size: 15px;color: rgba(0,0,0,.6)">GB 1960 IOPS</p>';
        html+='<p style="float: left;height: 30px;line-height: 30px;">数量：</p>';
        html+='<div class="col-lg-1 jsNum" style="margin-left: 10px;border:none;">';
        html+='<input type="number" name="" min="1" readonly value="1" class="buyNum1 addShu" onblur="shuliangChange(this)">';
        html+='<input type="number" style="display: none;" name="" min="1" value="0" class="ztotals">';
        // html+='<i class="add" onclick="addNum(this)">∧</i>';
        // html+='<i class="reduce" onclick="reduceNum(this)">∨</i>';
        html+='</div>';
        html+='</div>';
        var jssnum = $('.jssnum').html();
        var totalnum = $('.totalnum').html();
        if(jssnum>15){
          jssnum = 16;
          $('.jia').addClass('jiabg');
          return false;
        }else{ 
          jssnum++;
          $('.choses').after(html);
        }

        if(totalnum<1){
          totalnum = 0;
          return false;
        }else{ 
          totalnum--;
        }
        $('.jssnum').html(jssnum);
        $('.totalnum').html(totalnum);
        // var len = $('.addNums').html();
        // var addnums = $('.shujuNums').val();
        // var sGBprice = $('#sGBprice').val();
        // var addShu = $('.addShu').val();
        // var sjTotalprice = accMul(accMul(accMul(addnums,sGBprice),len),addShu);
        // 将数据盘计算的总值存入这个输入框内
        $(id).parent().siblings('.jianpans').each(function(i){
          var idname = $(id).parent().siblings('.jianpans').eq(i).find('.sjpan').find('option:selected').val();
          if(idname == '高效云盘'){
           $(id).parent().siblings('.jianpans').eq(i).find('.jsNum>.shujuNums').attr('id',sJmonthspriceb);
          }else{
            $(id).parent().siblings('.jianpans').eq(i).find('.jsNum>.shujuNums').attr('id',sdJmonthspriceb);
          }
          var a = $(id).parent().siblings('.jianpans').eq(i).find('.jsNum>.shujuNums').attr('id');
          var b = $(id).parent().siblings('.jianpans').eq(i).find('.jsNum>.shujuNums').val();
          var c = $(id).parent().siblings('.jianpans').eq(i).find('.jsNum>.addShu').val();
          var abcZtotal = a*b*c;
          $(id).parent().siblings('.jianpans').eq(i).find('.jsNum>.ztotals').val(abcZtotal);
        })
        totalcomputed();
        jsprice();

      }
      function reduceboxes(id){
        $(id).parent().remove();
        var jssnum = $('.jssnum').html();
        var totalnum = $('.totalnum').html();
        jssnum--;
        totalnum++;
        if(jssnum <16){
          $('.jia').removeClass('jiabg');
        }
        $('.jssnum').html(jssnum);
        $('.totalnum').html(totalnum);
        if($('.addNums').html() == 0){
          $('#sjTotalprice').val(0);
        }else{
          var len = 1;
          var addnums = $('.shujuNums').val();
          var sGBprice = $('#sGBprice').val();
          var addShu = $('.addShu').val();
          var sjprice = accMul(accMul(accMul(addnums,sGBprice),len),addShu);
          var bigPrice = $('#sjTotalprice').val();
          
          var sjTotalprice = Subtr(bigPrice,sjprice);
          // console.log(sjprice);
          // console.log(sjTotalprice);
          // 将数据盘计算的总值存入这个输入框内
          // $('#sjTotalprice').val(sjTotalprice);
          totalcomputed();
        }
        jsprice();
        // console.log($('.jianpans').size());
      }
      // 新一代和所有代
     $('.childlist>li').click(function(){
        $(this).find('span').addClass('colorbg2').parent().siblings('li').find('span').removeClass('colorbg2');
      })
      
      // 计费方式的
      $('.jfsl>li').click(function(){
        $(this).find('span').addClass('colorbg').parent().siblings('li').find('span').removeClass('colorbg');
      })
      
      $('.listul>li').click(function(){
        $(this).find('span').addClass('colorbg').parent().siblings('li').find('span').removeClass('colorbg');
      })

      function addNum(id){
        var nums = $(id).siblings('.buyNum1').val();
        nums ++;
        $(id).siblings('.buyNum1').val(nums);
      }
      function reduceNum(id){
        var nums = $(id).siblings('.buyNum1').val();
        if(nums <= 1){
          nums = 1;
        }else{
          nums --;
        }
        $(id).siblings('.buyNum1').val(nums);
      }
      var F = new Object();
      F.DurationConfig = {};
      F.DurationConfig.data = [];
      var vm_duration_config = [{"max":9,"min":1,"step":1,"unit":"month"},{"max":3,"min":1,"step":1,"unit":"year"},{"max":15,"min":1,"step":1,"unit":"day"}];
      (function(){
        var i = 0, l = 0, _i = 0, _l = 0,
          step = 0,
          min = 0,
          max = 0,
          type;
        for(i = 0, l = vm_duration_config.length; i < l; i ++){
          type = vm_duration_config[i].unit;
          for(_i = vm_duration_config[i].min - 0, _l = vm_duration_config[i].max - 0; _i <= _l; _i ++){
            min = max;
            max = _i;
            max = type === 'year' ? max * 12 : max;
            step = max - min;
            F.DurationConfig.data.push({
              'unit': step,
              'min': min,
              'max': max
            });
          }
        }
        F.DurationConfig.defaultValue = 12;
      })();


      new AC.slider("#duration",{
        data: F.DurationConfig.data,
        min: 1,
        bindInput: '.duration'
      });

      $('select').select();

      $('.tiaokuan').click(function() {
        layer.open({
          title: null,
          area:['600px','500px'],
          scrollbar: false,
          shade: 0.8,
          btn: null,
          content: $('#tiaokuan').html()
        });     
      });

      // 验证输入的登录密码与确认密码是否一致
      function surepass(id){
        var surepass = $(id).val();
        var loginpass = $(id).parent().siblings('div').find('#loginpass').val();
        // alert(loginpass.match(str));
        if(surepass != loginpass){
          layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg('您2次输入的密码不一致，请重新输入');
              });
        }
        
      }

      function loginpass(id){
        var loginpass = $(id).val();
        var str = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;
        if(!loginpass.match(str)){
          layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg('您输入的密码格式不正确，请重新输入');
              });
        }
      }
      // 提交订单
      function sureorder(){
        // 包年包月
        var jffs = $('#jffs>li').find('.colorbg').attr('id');
        // 地域
        var diyu = '';
        var zoneid = '';
        var shili = '';
        var shiliId = '';
        diyu = $('.inThis').find('span').attr('id');
        // 地域的小分区id值
        zoneid = $('.choseList').find('.colorbg6').attr('id') == undefined ? '':$('.choseList').find('.colorbg6').attr('id');

        $('#rachargbox>tr').each(function(i){
          if($(this).find('td').eq(0).find('input:checked').parent().parent().siblings('td').eq(1).html() !=null){
            shili = $(this).find('td').eq(0).find('input:checked').parent().parent().siblings('td').eq(1).html();
            shiliId = $(this).attr('id');
          }
        })
        // 镜像选择系统类别
        var jxXt = $('#xtFL').find('option:selected').val();
        // 镜像选择系统版本
        var jxBb = $('#chosebb').find('option:selected').val();
        // 存储系统盘
        var ccXt = $('#systemYun').find('option:selected').val();
        // 存储系统盘input里面的数值
        var changeNums = $('#changeNums').val();
        // 存储数据盘
        // var
        // 公网带宽id
        var daikId = $('#daik').find('li>.colorbg').attr('id');
        var imageid = '';
        if($('#chosebb').find('option:selected').attr('id') == undefined){
          imageid = '';
          layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg('请选择操作系统');
              }); 
          return false;
        }else{
          imageid = $('#chosebb').find('option:selected').attr('id');
        }

        // 公网带宽的数值
        var showArea = $('#showArea').val();
        var dataStrName = new Array();
        var dataStrNums = new Array();
        if($('.addNums').html()>0){
          $('.jianpans').each(function(i){
            if($('.jianpans').size()>0){

              dataStrName.push($(this).find('.sjpan').find('option:selected').val());
              dataStrNums.push($(this).find('div>.shujuNums').val());
            }else{
              dataStrName = [];
              dataStrNums = [];
            }
          })
        }
          

        // 登录凭证登录名
        var loginame = $('#loginame').html();
        // 登录凭证登录密码
        var loginpass = $.trim($('#loginpass').val());
        var surepass = $.trim($('#surepass').val());
        if(loginpass == ''){

              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg('请输入您的登录密码');
              }); 
              return false;
        }
        if(surepass == ''){

              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg('请输入您的确认密码');
              }); 
              return false;
        }
        
        if(surepass !== loginpass){

              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg('您输入的登录密码与确认密码不一致，请重新输入');
              }); 
              return false;
        }

        // 最终购买价格
        var pfy = $('.pfy').html();
        // 时间
        var time = $('.buytime').attr('id');

        // 实例打折前的价格
        var ruleprice = $('#prellSl').val();

        // 系统盘打折前的价格
        var xiprice = $('#systempriceint').val();

        // 数据盘打折前的价格
        var shuprice = $('#datapriceint').val();

        // 带宽打折前的价格
        var widthprice = $('#daikuangint').val();

        var params = {
            // 计费方式的ID
            jifei: jffs,
            // 地域分区大分区
            diyu: diyu,
            // 地域分区小分区
            zoneid: zoneid,
            // 实例的规格ID
            eid: shiliId,
            // 实例的规格全称 
            eidname: shili,
            // 选择的系统版本类型
            ImageId: imageid,
            // 系统盘的名称id
            xipan: ccXt,
            // 系统盘的内存的数量
            xipannei: changeNums,
            // 数据盘的名称
            shuju: dataStrName,
            // 数据盘的内存的数量
            shujunei: dataStrNums,
            // 公网带宽的类型
            InternetChargeType: daikId,
            // 公网带宽的数值
            InternetMaxBandwidthOut: showArea,
            // 远程登录密码
            password: loginpass,
            // 时间
            time: time,
            // 价格
            money: pfy,
            // 实例打折前的价格
            ruleprice: ruleprice,
            // 系统盘打折前的价格
            xiprice: xiprice,
            // 数据盘打折前的价格
            shuprice: shuprice,
            // 带宽打折前的价格
            widthprice: widthprice
          };
        $.ajax({
          url:"{:U('order/index')}",
          type:'post',
          dataType:'json',
          data:params,
          success: function(res){
            if(res.code == 1){
           /*   window.location.href="./sureorder.html?orderid="+res.data;*/
                window.location.href = "{:U('home/service/sureorder')}&orderid="+res.data;
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(res.msg);
              }); 
            }
          },
          fail: function(res){
            console.log(res);
          }
        })
      }
      // 更新地域右边的数据请求
      function getareas(id){
        var areaNameId = $(id).find('span').attr('id');
        var areaName = $(id).find('span').html();
        $('.inThis').find('span').html(areaName);
        $('.inThis').find('span').attr('id',areaNameId);
        $('.arealistNAME').find('.dyboxes').find('dl>dd>span').removeClass('colorbg');
        $(id).find('span').addClass('colorbg');
        $(id).parent().parent().parent().hide();
        $(id).siblings().find('span').removeClass('colorbg');
        var areaUrl = "{:U('home/service/areainfo')}";
        $.ajax({
          url:areaUrl,
          type:'post',
          dataType:'json',
          data:{
            areanameid: areaNameId
          },
          success: function(res){
            $('.choseList').find('span').remove();
            var html = '';
            html+='<span id="" class="colorbg6" onclick="diyuFun(this)">随机分配</span>';
            $.each(res,function(i){
              html+='<span id="'+res[i]['fenname']+'" onclick="diyuFun(this)">'+res[i]['fenvaluename']+'</span>';
            })
            $('.choseList').append(html);
            jffsval = $('#jffs>li').find('.colorbg').attr('id');
            fenname = $('.choseList').find('.colorbg6').attr('id');
          // 仅显示最新一代和所有代的值
          childval = $('.childlist>li').find('.colorbg2').attr('id');
          // 地域初始化的值
          jival = $('.inThis').find('span').attr('id');
          // 架构初始化的值
          jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
          // 分类初始化的值
          fenleival = $('.fenlei>Li').find('.colorbg').html();
          console.log(childval,jffsval,jival,fenname,jiagouval,fenleival)

          getpage(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival);
          }
        })
      }


      // 地域点击请求的数据展示
      function diyuFun(id){
        $(id).addClass('colorbg6').siblings('span').removeClass('colorbg6');
        var id = $(id).attr('id')==undefined?'':$(id).attr('id');
        fenname = id;
        jffsval = $('#jffs>li').find('.colorbg').attr('id');
        // 仅显示最新一代和所有代的值
        childval = $('.childlist>li').find('.colorbg2').attr('id');
        // 地域初始化的值
        jival = $('.inThis').find('span').attr('id');
        // 架构初始化的值
        jiagouval = $('.jiagou>Li').find('.colorbg').attr('id');
        // 分类初始化的值
        fenleival = $('.fenlei>Li').find('.colorbg').html();
        console.log(childval,jffsval,jival,fenname,jiagouval,fenleival)

        getpage(1,limit,childval,jffsval,jival,fenname,jiagouval,fenleival);
      }


      
    </script>
</body>
</html>